Question

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

我认为在下面的链接中查看我正在谈论的内容是最简单的：

http://www.voyagetestsite.co.za

查看我的HTML，我已经删除了不必要的内容......

＆＃13;

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");
}

＆＃13;

    #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;

    }

＆＃13;

<!-------------------- 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>

＆＃13;

Answer 1

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

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

Answer 2

我会在三个内容div中添加一个类（例如class =“content-container”。对于三个＃show.click-functions我会添加（在开头）$（“。content-container”） .hide（）;

Answer 3

修改代码以使其正常工作。我省略了一些你可以补充的内容。

Fiddle

＆＃13;

$(".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));
    }
  });
});

＆＃13;

#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;
}

＆＃13;

<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------------>

＆＃13;

单击新div时，Div不会隐藏

3 个答案: