Question

想问一下如何逐一打开下拉列表。目前，当我点击活动时，所有这些活动都会打开。如果它不使用，我怎么能把它隐藏起来？

这是我的代码：

<script>
$( document ).ready(function() {
if ($(".dropdown-toggle").click(function() {
        $('.dropdown-menu').show();
        else {
        $('.dropdown-menu').hide();
        }
    });
});
</script>

这是我的HTML：

<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>

如果我只点击其中一个，我该如何让它们单独打开。

Answer 1

这是你想要的吗？

$(document).ready(function() {
    $(".dropdown-menu").hide();
  $(".dropdown-toggle").click(function() {
    $(".dropdown-menu").hide();
    $(this).next(".dropdown-menu").show();
  });
});

<强>演示

＆＃13;

$(document).ready(function() {
    $(".dropdown-menu").hide();
  $(".dropdown-toggle").click(function() {
    $(".dropdown-menu").hide();
    $(this).next(".dropdown-menu").show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
  <ul class="dropdown-menu">
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</li>

＆＃13;

Answer 2

if ($(".dropdown-toggle").click(function() {完全错了，您不需要if和else，只需使用click函数，然后使用$(this)和{{ 1}}找到目标next()，然后使用ul或fadeToggle()来显示/隐藏（或slideToggle()）。

＆＃13;

toggleClass()

＆＃13;

$(document).ready(function() {

 $(".dropdown-toggle").click(function(e) {
    e.preventDefault();
    $('.dropdown-menu').not($(this).next('.dropdown-menu')).fadeOut()
    $(this).next('.dropdown-menu').fadeToggle().toggleClass('isOpen');
  });
});

＆＃13;

.dropdown-menu {
  display: none;
}

＆＃13;

Answer 3

为了更好的练习，您应该使用.toggle()。 allready检查元素是否可见。

＆＃13;

$( document ).ready(function() {
   
    // Hide all dropdowns by default
    $(".dropdown-menu").hide();        

    $(".dropdown-toggle").click(function() {

        // .next() selects next sibling. In this case <ul class="dropdown-menu">
        $(this).next().toggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>
                            <li><a href="">Test</a></li>    
                            <li><a href="">Test</a></li>        
                        </ul>
                    </li>

＆＃13;

jQuery如果显示和隐藏单个下拉列表

3 个答案: