Question

我目前正在使用bootstrap框架来构建菜单，如下所示。当我点击其中一个链接时，它会将一个div从hide切换为show。

<ul class="nav nav-pills">
  <li class="active"><a href="index.php">Home</a></li>
  <li><a href="#" id='createfolder'><span class="glyphicon glyphicon-plus"></span> Create a folder</a></li>
  <li><a href="#" id='addproject'><span class="glyphicon glyphicon-plus"></span> Add Project File</a></li>
  <li><a href="#" id='viewfiles'><span class="glyphicon glyphicon-eye-open"></span> View Files & Versions</a></li>
  <li><a href="#" id='find'><span class="glyphicon glyphicon-search"></span> Search Files & Versions</a></li>
</ul>

Jquery切换代码：

$(document).ready(function(){
  $("#search").hide();
  $("#find").click(function(){
    $("#search").toggle();
  });
});

<div id="search">
  <p>Some content that gets toggled back and forth</p>
</div>

问题是当从一个菜单切换到另一个菜单时，我最终会产生一种附加效果，其中一个按钮将保持打开而另一个按钮被点击，如Code IO所示。

我已经提出了一个包含以下内容的quickfix：http://codepen.io/thisperson/pen/QbqjvZ

有没有更好的方法来解决这个问题？我试图这样做，所以当点击一个按钮时，另一个按钮会隐藏它的内容，反之亦然，如果点击任何一个按钮，则隐藏可见内容。

Answer 1

您的Codepen示例中的逻辑要复杂得多。点击一个按钮，您只需hide()一个div，show()另一个div：

$("#add,#all").hide();

$("#addanime").click(function() {
    $("#all").hide();
    $("#add").show();
});

$("#viewall").click(function() {
    $("#all").show();
    $("#add").hide();
});

Updated Codepen

Jquery切换位移

1 个答案: