0

我有一个 jQuery 驱动的侧面导航菜单，单击 li 会加载隐藏的 div。当我单击另一个 li 时，我每隔一个隐藏的 div id 就有一个 hide() 函数。理想情况下，我正在寻找一种方法，当我单击 li 时，它会显示隐藏的 div 并隐藏以前存在的 div。我必须根据 id 加载每个隐藏的 div，但我认为在加载新 div 之前有一些方法可以隐藏当前内容。这是我目前拥有它的方式：

         <ul>
            <li id="overview" class="selector"><a href="#">OVERVIEW</a></li>
            <li id="whyus" class="selector"><a href="#">WHY US</a></li>
            <li id="clients" class="selector"><a href="#">CLIENTS & TESTIMONIALS</a>   </li>
            <li id="staff" class="selector"><a href="#">MEET THE STAFF</a></li>
        </ul>

jQuery(document).ready(function() {

jQuery("#overviewHidden").fadeIn();
    jQuery("li#overview").addClass('active');



jQuery("li.selector").click(function () {
  jQuery(this).addClass('active');
  jQuery(this).siblings().removeClass('active');
});



    jQuery("#overview").click(function(){
        jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#overviewHidden').slideDown();
    });

    jQuery("#whyus").click(function(){
        jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#whyusHidden').slideDown();
    });

    jQuery("#clients").click(function(){
        jQuery('#overviewHidden, #whyusHidden, #staffHidden').hide();
                    jQuery('#clientsHidden').slideDown();   
    });

    jQuery("#staff").click(function(){
        jQuery('#clientsHidden, #overviewHidden, #whyusHidden').hide();
                    jQuery('#staffHidden').slideDown();
    });

});

而不是所有 div 上的 hide() ，我想隐藏当前 div 是什么。谢谢，

4

2 回答 2

1

一种解决方案是向所有隐藏的 div 添加一个类，hidden-container然后在您的点击处理程序中使用它来隐藏元素，而不是使用硬编码的 id。

前任

jQuery("#whyus").click(function(){
    var hidden = jQuery('#whyusHidden');
    jQuery('.hidden-container').not(hidden).hide();
    hidden.slideDown();
});

您还可以通过删除单个点击处理程序来改进解决方案

为此，您需要为hidden-container每个 div添加一个名为的类

jQuery("li.selector").click(function () {
    var $this = jQuery(this);
    $this.addClass('active');
    $this.siblings().removeClass('active');

    var hidden = jQuery('#' + this.id + 'Hidden');
    jQuery('.hidden-container').not(hidden).hide();
    hidden.slideDown();
});

因为据我所知id，隐藏的 id 只不过是点击的 li 的id+Hidden

演示：小提琴

于 2013-06-09T01:59:58.190 回答
0

您可以在单击链接时简单地打开或关闭活动类名称，同时隐藏活动 div。这是一个工作示例http://codepen.io/lukeocom/pen/eFdjI

您还可以通过将类添加到ul而不是 each来改进代码li。然后在每个上使用单独的类名li来选择隐藏的 div。您不需要使用<a>标签，因为您可以轻松地为标签分配点击功能<li>。

$('.selector li').click(function(){
  //hide current displayed div
  $('.active').toggleClass('active').hide();

  //get the class name of this item to select the hidden div.
  var theId = '#' + $(this).attr('class');
  //show the div, assign active class
    $(theId).toggleClass('active').fadeIn(500);
});

希望这可以帮助

于 2013-06-09T02:13:24.890 回答