将无序的内容表变成带有JS/jquery/css的下拉菜单

Question

我有一个自动生成的目录表，这是一个无序的列表：

<ul class="elementor-toc__list-wrapper"><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-0" class="elementor-toc__list-item-text elementor-toc__top-level elementor-item-active">How AP Exams Are Scored</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-1" class="elementor-toc__list-item-text elementor-toc__top-level">What Are AP Scores Used for?</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-2" class="elementor-toc__list-item-text elementor-toc__top-level">What is Advanced Placement® and Credit?</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-3" class="elementor-toc__list-item-text elementor-toc__top-level">What AP Exam Scores Do Colleges And Universities Accept?</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-4" class="elementor-toc__list-item-text elementor-toc__top-level">AP Exam Score Distribution</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-5" class="elementor-toc__list-item-text elementor-toc__top-level">Frequently Answered Questions (FAQs)</a></div></li></ul>

我希望此列表变成移动设备上的下拉列表（低于768px）。我想在pageload上使用jQuery来生成基于此UL LI的下拉菜单（＆lt; option ...），然后在移动/桌面上相应地显示/隐藏，

或者如果可能的话，我想将其变成下拉菜单菜单只有CSS。

我正在使用的代码需要改进（请记住，我正在使用防御JS的WP Rocket，并延迟了JS执行，我正在尝试使用它）：

<script type="text/javascript">
// Table of Contents (ToC) code - new April 19 2022
document.addEventListener("DOMContentLoaded", function(event) { 
    // console.log("document ready");
    
    runWhenJqueryIsLoaded();

    function runWhenJqueryIsLoaded() {
        if( window.jQuery ) {
            jQuery(window).on("resize", function (e) {
                checkScreenSize();
            });

            // Table of Contents (ToC) code
            function convertTOCtoDropdown() {
                
                //first, store original non-mobile TOC so we can reverse back to it
                window.originalTOC = jQuery("#TOC .elementor-toc__list-wrapper");
                jQuery(function() {
                    jQuery("#TOC ul.elementor-toc__list-wrapper").each(function() {
                        var $select = jQuery("<select />");
                        
                        jQuery(this).find("a").each(function() {
                            var $option = jQuery("<option />");
                            $option.attr("value", jQuery(this).attr("href")).html(jQuery(this).html());
                            $select.append($option);
                        });
                        
                        jQuery(this).replaceWith($select);
                    });
                    // make mobile dropdown ToC function
                    jQuery("#TOC select").change(function() {
                        var cTarget = jQuery(this).val();
                        window.location.hash = cTarget;
                    });

                    jQuery("#TOC select").wrap("<div class='dropdown-container stickyDropdown' id='section-nav-mobile'></div>" );
                });
            }
            function checkScreenSize(){
                
                
                var newWindowWidth = jQuery(window).width();
            
                // if the screen is smaller than 768, and if mobile dropdown does not exist
                if ((newWindowWidth < 768) && (jQuery(".dropdown-container").length == 0)) {
                    
                    // show mobile dropdown, hide desktop ToC
                    
                    
                    
                    
                    convertTOCtoDropdown();
                    makeMobileDropdownSticky();
                    // console.log('convert to dropdown, and make sticky');
                }
                // if screen is larger than 768, and if mobile dropdown exists in DOM
                else if ((newWindowWidth > 768) && (jQuery(".dropdown-container").length !== 0) && (jQuery("#TOC .elementor-toc__list-wrapper").length == 0)) {



                    jQuery(".elementor-toc__header").show();
                    jQuery(".dropdown-container").replaceWith(window.originalTOC);
                    
                }
            }

            function makeMobileDropdownSticky() {
                jQuery(window).scroll(function() {
                    if (jQuery(document).scrollTop() > jQuery(".elementor-background-overlay").height() - jQuery(".stickyDropdown").height() ) {
                        jQuery('.stickyDropdown').css('position', 'fixed');
                        jQuery('.stickyDropdown').css('top', jQuery("#ast-mobile-header").height());
                        jQuery(".stickyDropdown").css("width", jQuery("#contentsColumn").width());
                    }
                    else {
                        jQuery('.stickyDropdown').css('position', 'relative');
                        jQuery('.stickyDropdown').css('top', '');
                        jQuery('.stickyDropdown').css('width', '');
                    }
                });
            }

            checkScreenSize();
            
        } else {
            // wait 50 milliseconds and try again.
            window.setTimeout( runWhenJqueryIsLoaded, 250 );
        }
    }

});

</script>

Answer 1

你的意思是这样的？将其调整到768px，我会去做类似的东西，然后将查询添加到您现有的查询中。让我知道这是否是您的意思。请注意，这不需要是一个按钮，它可以是您想要的任何东西，并设置您想要的一切。

$('.questions>button').click(function(){
 $('.elementor-toc__list-item-text-wrapper').toggle();
 });

button#questions{display:none;}

@media only screen and (max-width:768px){
button#questions {display:inline;}
.elementor-toc__list-item-text-wrapper {
  display:none; 
  }
li.elementor-toc__list-item {list-style-type:none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="questions"><button id="questions">For More Quetions</button>
<ul class="elementor-toc__list-wrapper">
  <li class="elementor-toc__list-item">
   <div class="elementor-toc__list-item-text-wrapper">
   <i class=""></i>
   <a href="#elementor-toc__heading-anchor-0" class="elementor-toc__list-item-text elementor-toc__top-level elementor-item-active">How AP Exams Are Scored</a>
   </div>
   </li>
   
   <li class="elementor-toc__list-item">
   <div class="elementor-toc__list-item-text-wrapper">
   <i class=""></i>
   <a href="#elementor-toc__heading-anchor-1" class="elementor-toc__list-item-text elementor-toc__top-level">What Are AP Scores Used for?</a>
   </div>
   </li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-2" class="elementor-toc__list-item-text elementor-toc__top-level">What is Advanced Placement® and Credit?</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-3" class="elementor-toc__list-item-text elementor-toc__top-level">What AP Exam Scores Do Colleges And Universities Accept?</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-4" class="elementor-toc__list-item-text elementor-toc__top-level">AP Exam Score Distribution</a></div></li><li class="elementor-toc__list-item"><div class="elementor-toc__list-item-text-wrapper"><i class=""></i><a href="#elementor-toc__heading-anchor-5" class="elementor-toc__list-item-text elementor-toc__top-level">Frequently Answered Questions (FAQs)</a></div></li></ul>
  </div>

Answer 2

我这样做了：

    window.onload = function(){
        console.log("document ready");
        function populateMobileTOC() {
            jQuery( "#TOC ul li" ).each(function( i, item ) {
                    jQuery('#mobileTOCselect').append(jQuery('<option>', { 
                        value: jQuery (this).find("a").attr("href"),
                        text : jQuery( this ).text() 
                    }));
                });
    
                jQuery("#mobileTOCselect").change(function() {
                    var cTarget = jQuery(this).val();
                    window.location.hash = cTarget;
                });
            }
    

            checkScreenSize();
    };