Div 单击新 div 时不隐藏

Question

有3个div在同一个space中显示和隐藏，当div在div中同时点击显示和隐藏时，它们工作得很好。但是...如果我打开第一个 div 然后单击第二个它不会自动关闭第二个...等等

我认为在下面的 link 上查看我在说什么最容易：

http://www.voyagetestsite.co.za

看我的HTML，我去掉了不需要的部分...

jQuery(document).ready(function() {
  jQuery(".menu-trigger").click(function() {
    $(".menu-trigger").hide("scale")
    jQuery(".test").slideToggle(900, function([complete]) {
      jQuery(this).toggleClass(".test").css("display");
    })
  });
});
$("#hide").click(function() {
  $("#bio-content").hide("slide");
  $("#hide").hide();
  $("#show").show();
});
$("#show").click(function() {
  $("#bio-content").show("slide");
  $("#show").hide();
  $("#hide").show();
});
$("#hide2").click(function() {
  $("#info-content").hide("slide");
  $("#hide2").hide();
  $("#show2").show();
});
$("#show2").click(function() {
  $("#info-content").show("slide");
  $("#show2").hide();
  $("#hide2").show();
});
$("#hide3").click(function() {
  $("#drums-content").hide("slide");
  $("#hide3").hide();
  $("#show3").show();
});
$("#show3").click(function() {
  $("#drums-content").show("slide");
  $("#show3").hide();
  $("#hide3").show();
});
// Preload all the GIF.
var image = [];

$.each(gif, function(index) {
  image[index] = new Image();
  image[index].src = gif[index];
});

function changeImage() {
  var ima = document.getElementById("BSlate");
  if (ima.src.match('BIDSlate')) {
    (ima.src = "img/BSlate.png");
  } else
    (ima.src = "img/BIDSlate.gif");
}

    #show,

    #show2,

    #show3 {

      display: block;

      background: none;

      border: none;

      font-family: anders;

      font-size: 36px;

      color: #ABD8C1;

      outline: none;

    }

    #hide,

    #hide2,

    #hide3 {

      display: none;

      background: none;

      border: none;

      font-family: anders;

      font-size: 36px;

      color: #ABD8C1;

      outline: none;

    }

    #bio-content {

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      height: 400px;

      display: none;

      margin: 0 auto;

      padding: 0;

      position: relative;

      z-index: 100;

    }

    #info-content {

      height: 400px;

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      display: none;

      margin: 0 auto;

      padding: 0;

      position: relative;

      z-index: 100;

    }

    #drums-content {

      height: 400px;

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      display: none;

      margin: 0 auto;

      margin-bottom: 50px;

      padding: 0;

      z-index: 100;

      position: relative;

    }

<!-------------------- MY HTML --------------------------------->

<ul>
  <li>
    <input type="button" value="Less Bio" id="hide" />
    <input type="button" value="Biography" id="show" />
  </li>
  <li>
    <input type="button" value="Less Info" id="hide2" />
    <input type="button" value="Info" id="show2" />
  </li>
  <li>
    <input type="button" value="Less Drums" id="hide3" />
    <input type="button" value="Drums" id="show3" />
  </li>
</ul>
<div id="bio-content">
  <div class="content-pic">
    <img src="img/biopic.png" />
  </div>
  <div class="slide-content">
    <h1>Biography</h1>
    <hr />
    <p>Lorem ipsum dolor</p>
  </div>
  <div id="info-content">
    <div class="content-pic">
      <img src="img/infopic.png" />
    </div>
    <div class="slide-content">
      <h1>Information</h1>
      <hr />
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div id="drums-content">
    <div class="content-pic">
      <img src="img/drumpic.png" />
    </div>
    <div class="slide-content">
      <h1>Drums</h1>
      <hr />
      <p>Lorem</p>
    </div>
  </div>
</div>
<span class="menu-trigger" onclick="changeImage()">
    <h1 class="menu-button">MENU</h1></span>
<!-----------END MENU------------>
</div>
</div>

Answer 1

嗯，一种方法是给每个内容div一个class（即class="content"），然后使用jQuery 不要隐藏所有不是你当前的东西 div（例如 drum-content）：

$(".content").not($("#drums-content")).hide();

Answer 2

我会在三个内容 div 中添加一个 class（例如 class="content-container"。然后我会在三个 #show.click-函数中添加（在开头）$(".content-container").hide();

Answer 3

修改了您的代码以使其正常工作。我省略了一些您可以重新添加的内容。

Fiddle

$(".link").click(function() {

  if ($("#" + $(this).attr("desc")).css('display') != 'none') {
    $(".description").hide();
    $(this).val($(this).val().substring(5));
  } else {
    $(".description").hide();
    $(this).val("Less " + $(this).val());
    $("#" + $(this).attr("desc")).show("slide");
  }
  var ob = this;
  $(".link").each(function() {
    if (!$(ob).is($(this)) && $(this).val().indexOf("Less") > -1) {
      $(this).val($(this).val().substr(5));
    }
  });
});

#show,
#show2,
#show3 {
  display: block;
  `enter code here` background: none;
  border: none;
  font-family: anders;
  font-size: 36px;
  color: #ABD8C1;
  outline: none;
}

#hide,
#hide2,
#hide3 {
  display: none;
  background: none;
  border: none;
  font-family: anders;
  font-size: 36px;
  color: #ABD8C1;
  outline: none;
}

#bio-content {
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  height: 400px;
  display: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 100;
}

#info-content {
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  display: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 100;
}

#drums-content {
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  display: none;
  margin: 0 auto;
  margin-bottom: 50px;
  padding: 0;
  z-index: 100;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="button" value="Biography" class="link" desc="bio-content"/>
  </li>
  <li>
    <input type="button" value="Info" class="link" desc="info-content" />
  </li>
  <li>
    <input type="button" value="Drums" class="link" desc="drums-content" />
  </li>
</ul>

<div id="bio-content" class="description">
  <div class="content-pic"><img src="img/biopic.png" /></div>
  <div class="slide-content">
    <h1>Biography</h1>
    <hr />
    <p>Lorem ipsum dolor</p>
  </div>
  </div>
  
  <div id="info-content" class="description">
    <div class="content-pic"><img src="img/infopic.png" /></div>
    <div class="slide-content">
      <h1>Information</h1>
      <hr />
      <p>Lorem ipsum</p>
    </div>
  </div>
  
  <div id="drums-content" class="description">
    <div class="content-pic">hello</div>
    <div class="slide-content">
      <h1>Drums</h1>
      <hr />
      <p>Lorem</p>
    </div>
  </div>


<!-----------END MENU------------>

Div 单击新 div 时不隐藏

Div not hiding when new div is clicked

css

jquery

show-hide