Question

我正在尝试使用无序列表和jQuery来模仿依赖选择列表，因此我可以根据自己的需要设置样式，因为我无法设置选择列表的样式。

我遇到的问题是如果第二个菜单打开并且我点击第一个菜单，我需要在打开第一个菜单之前关闭第二个菜单。

我认为这就是问题所在。

if($("#next_menu").is(':visible')) {
    $("#next_menu").slideToggle(200);
}

此外，有没有办法可以改进代码，使其像链接事件一样更有效率？我见过人们只用几行编码，不知道这有可能与我所拥有的一样。

JQUERY

$(document).ready(function() {
    // hide the menu on page load
    $('#current_menu').hide();
    // hide each of the linked menus on page load
    $('#next_menu > ul').each(function() {
        $(this).hide();
    });

    $("#current_page").click(function() {

        if($("#next_menu").is(':visible')) {
            $("#next_menu").slideToggle(200);
        }
        // slide up/down the first menu
        $("#current_menu").slideToggle(200);
    });

    $("#current_menu li").click(function(event) {
        // set the text of div to what was clicked
        $("#current_page").html($(this).text());

        // get the id if the clicked <li>
        var id = $(this).attr('id');

        //slide up the first menu
        $("#current_menu").slideToggle(200, function() {

            $("ul." + id).show();
        });
    });
});

HTML

<div class="aaa">
    <div id="current_page">Default Value</div>
    <div id="current_menu">
      <ul>
        <li id="a"><a href="#">Option A</a></li>
        <li id="b"><a href="#">Option B</a></li>
        <li id="c"><a href="#">Option C</a></li>
      </ul>
    </div>
</div>
<div class="aaa">
    <div id="next_page">Default Value</div>
    <div id="next_menu">
        <ul class="a">
            <li>Lipsum</li>
            <li>Lipsum</li>
            <li>Lipsum</li>
        <ul></ul>
        <ul class="b">
            <li>Lipsum</li>
            <li>Lipsum</li>
            <li>Lipsum</li>
        </ul>
        <ul class="c">
            <li>Lipsum</li>
            <li>Lipsum</li>
            <li>Lipsum</li>
        </ul>
    </div>
</div>

Answer 1

在菜单中添加相同的类，如.menus

$('.menus').click(function(){
  if(!$(this).is(':visible'){
   $('.menus').hide();
   $(this).show();
  }
});

jQuery无序列表幻灯片菜单

1 个答案: