コードjsFiddle親のdiv内の要素の存在に同じjqueryの関数を適用
私は「li#info」要素にjQueryのクリック機能を適用します。しかし、クリックすると、別の親の要素にもjqueryが実行されます。('#theme div#info-overlay')。
私は「li#info」は親要素('#theme')上でクリックされるたびに、それはその子要素のみ(div#info-overlay)に関数を実行し、したいです。
コード「」のように、「Fe」をクリックすると、両方のブロックでオーバーレイが開きます。しかし、私はそれが 'Fe'isがクリックされたブロックにのみオーバーレイを表示したい。
申し訳ありませんが、私はjqueryで新しいです。
利用されるように、このライン
$("div#info-overlay").toggle('100');
を変更する必要があり10
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
\t $(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
\t \t \t
// \t $("div#info-overlay").toggle('100');
});
});/*
\t theme block
*/
.theme{
\t width: 100%;
\t height: 250px;
\t background-color: #fff;
\t margin: 20px auto;
}
.theme .header{
\t width: 100%;
\t height: 200px;
\t position: relative;
\t background-color: #eee;
}
.theme .header *{
\t display: none;
}
.theme .header .overlay{
\t position: absolute;
\t background-color: #fff;
\t left: 60px;
\t top: 10px;
\t width: 83%;
\t height: 180px;
\t z-index: 80;
}
.theme .header .about{
\t position: absolute;
\t left: 10px;
\t top: 10px;
}
.theme .header .about li{
\t display: block;
\t height: 40px;
\t width: 40px;
\t border-radius: 50%;
\t background-color: #FED200;
\t opacity: .5;
\t color: #fff;
\t padding: 5px 10px;
\t margin: 5px 0;
}
.theme .footer{
\t width: 100%;
\t height: 50px;
\t padding: 0 20px;
}
.theme .footer .left{
\t width: 85%;
\t display: inline-block;
\t overflow-y:hidden;
\t height: 50px;
\t float: left;
\t padding: 10px 0;
}
@media screen and (min-width:620px) {
\t .theme{
\t \t width: 70%;
\t }
}
@media screen and (min-width:720px) {
\t .theme{
\t \t width: 49%;
\t \t display: inline-block;
\t }
}
@media screen and (min-width:920px) {
\t body .container.theme-holder {
\t \t width: 70%;
\t }
}
@media screen and (min-width:1024px) {
\t body .container.theme-holder {
\t \t width: 95%;
\t }
\t .theme{
\t \t width: 32%;
\t }
}
@media screen and (min-width:1200px) {
\t body .container.theme-holder {
\t \t width: 85%;
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
\t \t \t <div class="header">
\t \t \t \t <div class="about">
\t \t \t \t \t <li id="info">Fe</li>
\t \t \t \t </div>
\t \t \t \t <div id="info-overlay" class="overlay">
\t \t \t \t info
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="footer">
\t \t \t \t <div class="left">
\t \t \t \t \t <div class="name">
\t \t \t \t \t <p>Corporate sdfsfdsfdsfsd</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div id="theme" class="theme">
\t \t \t <div class="header">
\t \t \t \t <div class="about">
\t \t \t \t \t <li id="info">Fe</li>
\t \t \t \t </div>
\t \t \t \t <div id="info-overlay" class="overlay">
\t \t \t \t info
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="footer">
\t \t \t \t <div class="left">
\t \t \t \t \t <div class="name">
\t \t \t \t \t <p>Corporate dfsasdfdsafs</p>
\t \t \t \t \t </div>
\t \t \t \t </div> \t
\t \t \t </div>
\t \t </div>
http://jsfiddle.net/6s21o4gs/4/これを確認してください。しかし、私は強く異なる要素に同じIDを使用しないことをお勧めします。代わりにクラスを使用してください。 – Naruto
@Naruto ok、どうもありがとうございました。私はそれを世話します。 – Dishu