Question

＆＃13;

$(document).ready(function() {
  $('#menuLinks').on('click', function() { $('#linkdrop').toggle(); });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<header>
   <nav>
<div>
<ul id="nav-mobile" class="right">
  <li><a class='dropdown-button white-text' id="menuLinks"><i class="material-icons left">&#xE5D2;</i>Links</a>
    <ul id="linkdrop" class="dropdown-content">
      <li><a href="/home.html">Home</a></li>
      <li><a href="/test2.html">Test2</a></li>
      <li><a href="/test3.html">Test3</a></li>
    </ul>
  </li>
</ul>
</div>
</nav>
</header>

＆＃13;

我有以下UL，其中包含多个<li>条目。我想要做的是每当点击<li>条目时，在其下显示<ul>。我的html如下：

 <ul id="nav-mobile" class="right">
       <li><a class='dropdown-button white-text' id="menuLinks"><i class="material-icons left">&#xE5D2;</i>Links</a>
                <ul id="linkdrop" class="dropdown-content">
                        <li><a href="/home.html">Home</a></li>
                        <li><a href="/test2.html">Test2</a></li>
                        <li><a href="/test3.html">Test3</a></li>
                 </ul>   
          </li>                                 
 </ul>

我尝试使用以下JQuery但它不起作用：

$(document).ready(function(){

            $('#menuLinks').click(
                function(){
                    if (! $('#linkdrop').hasClass('open')){
                            $('#linkdrop').addClass('open');
                        } else {
                            $('#linkdrop').removeClass('open');
                        }
                }

            );
    });

我也尝试过：

$(document).ready(function(){

            $('#menuLinks').click(
                function(){
                    $('#linkdrop').toggle();
                }

            );
    });

有人可以帮忙吗？

Answer 1

＆＃13;

$(document).ready(function() {
  $('.dropdown-button').on('click', function() {
    var toggle = $(this);
    $('#'+toggle.data('toggle')).toggle();
  })
});

＆＃13;

.dropdown-button + * {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="dropdown-button white-text" data-toggle="my-list1">Links</a>
    <ul id="my-list1">
      <li><a href="/home.html">Home</a></li>
      <li><a href="/test2.html">Test2</a></li>
      <li><a href="/test3.html">Test3</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

将内部ul置于li内并使用toggle()显示/隐藏内部ul

＆＃13;

$(document).ready(function() {
  $('#nav-mobile > li > a').click(function() {
    $(this).parent().find('ul').toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile" class="right">
  <li><a class='dropdown-button white-text' id="menuLinks"><i class="material-icons left">&#xE5D2;</i>Links</a>
    <ul id="linkdrop" class="dropdown-content">
      <li><a href="/home.html">Home</a></li>
      <li><a href="/test2.html">Test2</a></li>
      <li><a href="/test3.html">Test3</a></li>
    </ul>
  </li>
</ul>

＆＃13;

修改： -

$(this).next().toggle();也适用于您的情况

＆＃13;
＆＃13;
$(document).ready(function() { $('#nav-mobile > li > a').click(function() { $(this).next().toggle(); }); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-mobile" class="right"> <li><a class='dropdown-button white-text' id="menuLinks"><i class="material-icons left"></i>Links</a> <ul id="linkdrop" class="dropdown-content"> <li><a href="/home.html">Home</a></li> <li><a href="/test2.html">Test2</a></li> <li><a href="/test3.html">Test3</a></li> </ul> </li> </ul>
＆＃13;
＆＃13;
＆＃13;

Answer 3

我想我发现了这个问题 - 实现css以某种方式干扰了我的代码。一旦我删除了对实现css的引用，下拉列表就开始工作了

使用JQuery显示/隐藏无序列表

3 个答案: