如何切换点击的元素并使用引导隐藏所有其他元素？

Question

如何切换被点击的元素并使用引导程序V3.5隐藏所有其他元素？

这是我的代码：

<div id="buttons" style="padding: 50px;"> 
     <a data-toggle="collapse" data-target="#item-01"> 
     <button class="btn btn-default"> 
      Item-01 
     </button> 
     </a> 

     <a data-toggle="collapse" data-target="#item-02"> 
     <button class="btn btn-default"> 
      Item-02 
     </button> 
     </a> 
    </div> 

    <div id="itens"> 
     <div class="collapse" id="item-01"> 
      <span>Item 01</span> 
     </div> 
     <div class="collapse" id="item-02"> 
      <span>Item 02</span> 
     </div> 
    </div> 

DEMO页。

Answer 1

你或许应该把上的按钮自身的数据目标属性，但你的代码是...使用jQuery中的以下内容：

$("button").on("click", function(){ 
 
    var alertMsg = $(this).parent().data("target"); 
 
    alert(alertMsg); //First grab the data-target from the button's parent, or alternatively the button itself as I would recommend. 
 
    //Note, you have a typo which I moved forward with below. 
 
    
 
    /* var itemToShow = "#" + alertMsg; 
 
    alert(itemToShow); */ 
 
    
 
    // I would recommend as well you don't use hashtags in your data-* 
 
    // elements. Rather as shown here, add the hashtag in with code. 
 
    $("#itens .collapse").hide(); //first hide all of the elements 
 
    $(alertMsg).show(); //then show the element related to your button click event data-target id. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="buttons" style="padding: 50px;"> 
 
     <a data-toggle="collapse" data-target="#item-01"> 
 
     <button class="btn btn-default"> 
 
      Item-01 
 
     </button> 
 
     </a> 
 

 
     <a data-toggle="collapse" data-target="#item-02"> 
 
     <button class="btn btn-default"> 
 
      Item-02 
 
     </button> 
 
     </a> 
 
    </div> 
 

 
    <div id="itens"> 
 
     <div class="collapse" id="item-01"> 
 
      <span>Item 01</span> 
 
     </div> 
 
     <div class="collapse" id="item-02"> 
 
      <span>Item 02</span> 
 
     </div> 
 
    </div>