Question

我有一个jQuery驱动的侧面导航菜单，点击一个li加载一个隐藏的div。当我点击另一个li时，我在每个其他隐藏的div id上都有一个hide（）函数。理想情况下，我正在寻找一种方法，当我点击一个李，它显示隐藏的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的内容。谢谢，

Answer 1

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

实施例

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

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

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

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

演示：Fiddle

Answer 2

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

您还可以通过向ul而不是每个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);
});

希望这会有所帮助

jQuery加载隐藏的div作为内容部分

2 个答案: