1
同じスペースに表示と非表示の3つのdivがあり、divを個別にクリックして表示/非表示にすると完全に正常に動作します。しかし、...最初のdivを開き、2番目のdivをクリックすると、自動的に2番目のdivを閉じることはありません...新しいdivがクリックされたときにdivが隠れないようにする
私が話していることを見るのが最も簡単だと思います下記のリンク：
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>
アイデアは、すべてを隠し、1 –