Question

jquery的

$(function() {                       
  $(".i-icon").click(function() {  
    $("#navBar .navBarInfo li ul").toggle();     
  });
});



$(function() {                       
  $(".menu-icon").click(function() {  
    $("#navBar .mainNavBar li ul").toggle();     
  });
});

HTML

<div id="navBar">
    <div class="navBarStyles">
        <ul class="navBarInfo">
            <li><div class="i-icon iconStyles">u</div>
                <ul>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                </ul>
            </li>
        </ul>
        <ul class="mainNavBar">
            <li><div class="menu-icon iconStyles">z</div>
                <ul>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                    <li><a href="#">LINK</a></li>
                </ul>
            </li>
        </ul>
        <div style="clear: both"> </div>
    </div>
</div>

jsFiddle

对于你们来说这一定非常简单，但是我无法使其工作，我需要将jquery代码转换为if-else语句，以便一次只显示一个下拉列表。例如，当我单击u按钮时，它应显示列表，然后当我单击z按钮时，它应隐藏u列表并显示z列表。

Answer 1

在它之前添加隐藏功能..

$(function() {                       
  $(".i-icon").click(function() {  
      $("#navBar .mainNavBar li ul").hide();     
    $("#navBar .navBarInfo li ul").toggle();     
  });
});

$(function() {                       
  $(".menu-icon").click(function() {  
      $("#navBar .navBarInfo li ul").hide(); 
    $("#navBar .mainNavBar li ul").toggle();     
  });
});

UPDATED JSFIDDLE

Answer 2

打开相应的菜单后，只需隐藏其他菜单即可。因此，你只会打开一个。不，如果/否则需要。添加以下内容：

$("#navBar .otherNavBar li ul").hide();

像这样：

$(function() {                       
  $(".i-icon").click(function() {  
      $("#navBar .navBarInfo li ul").toggle();
      $("#navBar .mainNavBar li ul").hide(); // Here
  });
});

$(function() {                       
  $(".menu-icon").click(function() {  
    $("#navBar .mainNavBar li ul").toggle();  
    $("#navBar .navBarInfo li ul").hide(); // And here
  });
});

请参阅此JSFiddle。

Answer 3

仅使用一次点击事件切换两个列表

jQuery代码

$(function() {     

      $(".iconStyles").click(function() {  
        $(".iconStyles").next().hide();     
        $(this).next().show();     
      });

});

Answer 4

你可以用这种方式改变你的html标记

<div id="navBar">
<div class="navBarStyles">
    <ul class="navBarInfo">
        <li><div class="i-icon iconStyles">u</div>
            <ul class="list">
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </li>
    </ul>
    <ul class="mainNavBar">
        <li><div class="menu-icon iconStyles">z</div>
            <ul  class="list">
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </li>
    </ul>
    <div style="clear: both"> </div>
</div>
</div>

你的jquery可以如下

$(document).ready(function(){
$(function() {                       
  $(".iconStyles").click(function() {  
    $('.list').slideUp();
    $(this).closest('ul').find('ul').slideToggle();     
  });
});     
    });

css将保持不变。

将代码转换为if-else - jquery

4 个答案: