Question

我有一个HTML，如下所示

<div class="inner-accordion">
   <div id="activeui4" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="4">
         <section id="topping_tsection_4">
         </section>
      </div>
   </div>
   <div id="activeui5" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="5">
         <section id="topping_tsection_5">
         </section>
      </div>
   </div>
   <div id="activeui6" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="6"></div>
   </div>
</div>

点击一个按钮，我正在调用一个函数，我将传递id。

function showToppers(id)
{
var id  =4 ;
$('#activeui'+id+'.activateUiHTML').find(".Topping-details").toggle();
}

我的要求是如何隐藏/阻止所有其他类Topping-details除了在这种情况下的for id 4？

Answer 1

尝试此操作：使用.not()使用id=4

过滤顶部详细信息

$('.Topping-details').not('#4').hide();

Answer 2

只需隐藏所有这些，然后显示您想要的那个：

function showToppers(id){
    $(".Topping-details").hide();//hide all of them 
    $('#activeui'+id+'.activateUiHTML').find(".Topping-details").show();//show the one you want
}

更新版本，以解决OP关于如何关闭开放版本的评论。

function showToppers(id){
    $(".Topping-details").not("#"+id).hide();//hide all of them but the target one
    var $theoneiwant = $('#activeui'+id+'.activateUiHTML').find(".Topping-details");//store the target in a variable for efficiency
    if($theoneiwant.is(":visible")){//if it is open,
        $theoneiwant.hide();//close it
    } else {//its closed
        $theoneiwant.show();//open it
    }
}

Answer 3

使用jQuery:not()选择器

$('#activeui'+id+'.activateUiHTML').find(".Topping-details:not('#4')").hide();

Answer 4

DEMO

DEMO 2 ...使用jQuery.toggleClick插件切换n次点击。

我建议使用非数字ID，而不是在函数中对id进行硬编码，您可以使用data属性来保存button中的目标ID。

<强> HTML

<button class="hider" data-hide-id="i4">Just i4</button>
<button class="hider" data-hide-id="i5">Just i5</button>
<button class="hider" data-hide-id="i6">Just i6</button>
<div class="inner-accordion">
   <div id="activeui4" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i4">
         <section id="topping_tsection_4">
         </section>
      </div>
   </div>
   <div id="activeui5" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i5">
         <section id="topping_tsection_5">
         </section>
      </div>
   </div>
   <div id="activeui6" class="activateUiHTML" data-role="collapsible">
      <div style="display: block;" class="Topping-details" id="i6"></div>
   </div>
</div>

<强> JS

$(function() {
    $('.hider').on('click',function() {
        var id = $(this).data('hide-id');
        $('.Topping-details').show().not('#' + id).hide();
    });
});

Answer 5

$(".activateUiHTML").removeClass("active");
$("#activeui" + id).addClass("active");

活跃的课程将有

.activateUiHTML.active{
    display: block;
}

通常它有

.activateUiHTML{
    display:none;
}

使用CSS做得更清晰，在较旧/较慢的设备上效果更好

Answer 6

function hideSection(idToHide){
$(".Topping-details").each(function(){
    if(this.id == idToHide) {
        $(this).show();
    }else{
        $(this).hide();
    }
});
});
}

点击按钮调用此功能..

除了必需的div之外，如何隐藏其他div？

6 个答案: