仅显示/隐藏最近的元素

我很新的JavaScript/jQuery，我试图建立一个菜单，显示/隐藏不同的元素，当一个元素被点击。当单击div A时，它隐藏div A，在它的位置显示div B，并显示无序列表。当单击div B时，它隐藏div B，显示div A，并隐藏ul。仅显示/隐藏最近的元素

我有约90％的路，但我需要一点帮助。我试图只影响最接近的divs和uls，但似乎一切都受到影响。从我读到的信息看来，好像我应该使用.siblings和.closest这就是我，但显然我做错了一些事情。

JS小提琴链接：http://jsfiddle.net/w5VXr/6/

HTML：

<div class="essFeatureHeader">Appointment Scheduling</div> 
<div class="essFeatureHeader hidefeature">Appointment Scheduling</div> 
    <ul class="featureList"> 
     <li class="alternate">Unlimited Online Scheduling</li> 
    </ul>

的jQuery：

$(document).ready(function($) { 
    jQuery(".featureList").hide(); 
    jQuery(".hidefeature").hide(); 

    jQuery(".essFeatureHeader").click(function() { 
      $(this).closest('.essFeatureHeader').siblings(".featureList").show("slow"); 
          $(this).closest('.essFeatureHeader').hide(); 
          $(this).closest('.essFeatureHeader').siblings('.hidefeature').show(); 
     }); 
    jQuery(".hidefeature").click(function() { 
          $(this).closest('.hidefeature').siblings('.essFeatureHeader').show(); 
          $(this).closest('.hidefeature').siblings('.featureList').hide(); 
          $(this).closest('.hidefeature').siblings('.hidefeature').show(); 
     }); 
});

来源

2013-03-13 Jeremiah Prummer

看看the updated fiddle。

您对“隐藏”标题有过多的标记。这是不必要的，因为您只需更改现有标题上的类名即可。

新的标记看起来是这样的：

<div class="essFeatureHeader"> 
    <i class="icon-plus" style="margin-right: 5px"></i> 
    Outbound/Outcall Services 
</div> 
<ul class="featureList"> 
    <li class="alternate">Collect Client Addresses</li> 
    <li>Map Integration</li> 
    <li class="alternate">Travel Time</li> 
</ul>

对于每个项目

JavaScript代码更改如下：

$(function($) { 
    $("ul.featureList").hide(); 
    $("div.essFeatureHeader").click(function() { 
     var $this = $(this), 
      header = $this.find('i'), 
      target = $this.next(".featureList"), 
      showing = target.is(':visible'); 

     if(showing){ // hide 
      target.hide('slow'); 
      header.removeClass('icon-minus').addClass('icon-plus'); 
     } 
     else { 
      target.show('slow'); 
      header.removeClass('icon-plus').addClass('icon-minus'); 
     } 
    }); 
});

来源

2013-03-13 17:07:17

太好了，谢谢你向我展示了完全不同（更正确）的方法。 +1 – 2013-03-13 17:19:37

我想这应该这样做：

$(document).ready(function($) { 
jQuery(".featureList").hide(); 
jQuery(".hidefeature").hide(); 

jQuery(".essFeatureHeader.hidefeature").click(function() { 
      $(this).next(".featureList").hide("slow"); 
      $(this).prev('.essFeatureHeader').show(); 
      $(this).hide(); 
     }); 
jQuery(".essFeatureHeader:not(.hidefeature)").click(function() { 
      $(this).next('.essFeatureHeader').show(); 
      $(this).next('.essFeatureHeader').next(".featureList").show("slow"); 
      $(this).hide(); 
     }); 
});

来源

2013-03-13 16:50:45 jbl

谢谢你向我展示如何与我目前的标记来做到这一点。很棒！ +1 – 2013-03-13 17:20:41

我不知道如果这是你的话e寻找，但它对我最有意义。

http://jsfiddle.net/39vYR/1/

$(document).ready(function($) { 
    jQuery(".featureList").hide(); 
    jQuery(".hidefeature").hide(); 

    jQuery(".essFeatureHeader").click(function() { 
     $(this).hide().next('.hidefeature').show(); 
     $(this).nextAll('ul.featureList:first').show("slow"); 
    }); 

    jQuery(".hidefeature").click(function() { 
     $(this).hide().prev('.essFeatureHeader').show(); 
     $(this).nextAll('ul.featureList:first').hide("slow"); 
    }); 
});

我用来代替closest和siblings的next，nextAll和prev选择器。

closest选择器不环顾元素，它向上看，类似于parent选择器（如在documentation中所述），所以我不认为这是要走的路。

来源

2013-03-13 17:06:48 ZolaKt

感谢您为什么进行这些调整的解释！它工作正常+1 – 2013-03-13 17:17:55

看到这个：http://jsfiddle.net/w5VXr/10/

$(document).ready(function ($) { 
    jQuery(".featureList").hide(); 
    jQuery(".hidefeature").hide(); 

    jQuery(".essFeatureHeader").click(function() { 
     $(this).nextAll('.featureList:first').show("slow");  
     $(this).nextAll('.essFeatureHeader:first').show(); 
     $(this).hide(); 

    }); 
    jQuery(".hidefeature").click(function() { 
     $(this).prev('.essFeatureHeader').show(); 
     $(this).nextAll('.featureList:first').hide("slow"); 
     $(this).hide(); 
    }); 
});

来源

2013-03-13 17:07:01 Anujith

你真的只需要一个DIV - 不是两个 - 并且只需拨动类元素

您所使用的兄弟姐妹 - 所以它会影响所有匹配的兄弟姐妹..你真正想要的是.NEXT（）

jQuery("div.essFeatureHeader").click(function() { 
    var $el = $(this); 
    $el.find('i').toggleClass('icon-plus icon-minus'); 
    if($el.is('.hidefeature')){ 
     $el.next('.featureList').toggle(); 
    }else{    
     $el.next().next('.featureList').toggle(); 
    }   
});

您也不必因为$使用.closest（）（这）是指的同一元素

您不要在以下元素，因为你可以切换类

<div class="essFeatureHeader hidefeature" style="display: none;"><i class="icon-minus" style="margin-right: 5px"></i>Outbound/Outcall Services</div>

如果你删除这些div ..你不需要else语句再在上面的代码中

FIDDLE

来源

2013-03-13 17:07:03

感谢您的好解释！ +1 – 2013-03-13 17:21:38

仅显示/隐藏最近的元素

回答

相关问题