Question

因此，假设用户打开菜单并选择＃4。当他在选择＃4时再次打开菜单时，理想情况下菜单会隐藏＃4选项（因为选项仍然存在似乎是多余的）。如何在代码中实现这一目标？

HTML

<ul class="navbar cf">
                    <li>
                        <a href="#" class="ActiveListItem">Category</a>
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

CSS

ul.navbar {

  border-style:solid;
  border-width:1px; 
  border-color:#739FE0;
  width: 100px;                /*Widthchanger1*/
  border-radius: 4px;
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
  height:33px;



}


ul.navbar li a.ActiveListItem {
    background:url(../images/downarrowblue.png) !important; 
    background-repeat: no-repeat !important;
    background-size: 10px 10px !important;
    background-position: 83px 13px !important;
    color:white; !important;
    background-color:#222 !important;
    padding:7.5px 0px !important; 
    font-weight:normal !important;
    margin-left:0px;         /*Widthchanger2, got the activeitem centered with list text this way*/
    margin-right:0px;
    border-radius: 4px;
    height:18px;
    width:100px;   /*kinda messes with width of text*/
     margin-bottom:1px;

}

ul.navbar li {

    position: relative;
    width:100px;                        /*Changes width of actual list*/
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .1s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    /*background:black; */
    background:#739FE0;
    color:#FFFFFF;
    /*font-weight:600;*/
    /*border-bottom-color:#FFFFFF;
    border-bottom-style:solid;*/
    /*border-color:#FFFFFF;
    border-style:solid;
    border-width:1px; */

}

    ul.navbar li ul {
        margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }

JS

$(function() {




  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});

Answer 1

添加带有样式的类以在单击时隐藏它，当它单击其他一些时将其删除

JS

$('.navbar ul li a').click(function(event){  
  $('.navbar > li:first-child > a').text($(this).text());
  $('.navbar > li > ul').addClass('hidden');
  $('.navbar li ul').slideToggle(100);
  $('.navbar ul li.gone').removeClass("gone");
  $(event.taget).closest("li").addClass("gone")
});

CSS

.navbar ul li.gone { display: none; }

Answer 2

另一种方法是，如果点击了一个选项，则首先显示所有选项，以防在之前设置隐藏元素

// show all hidden options  
$('.navbar ul li a').show();

然后，您现在可以隐藏所选选项

// hide selected option
$(this).hide();

代码：

$(function() {
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    // show all hidden options  
    $('.navbar ul li a').show();
    // hide selected option
    $(this).hide();
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});

Fiddle

当用户再次点击下拉菜单时，如何隐藏当前选定的li项目作为选项？

2 个答案: