Question

如何切换单击的元素并使用bootstrap 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>

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

1 个答案: