-1

正直言って、私はjqueryなどで完全に初心者であるため、私のロープの終わりにいます。私の表現は混乱するかもしれないので、私に説明させてください。複数のアイコンを持つ画面を表示し、これらのアイコンの下にボタンがあります。このボタンをクリックすると、このアイコンの下に別のサイズの別のボックスが下に表示されます。私は物事をクリック、多かれ少なかれトグルにする方法を考え出しました...しかし、私が抱えている問題は、それに続くアイコンに同じボタンを使用すると、アイコンの番号の下にあるボックスとアイコンの番号2のボックス...ボックスが同じ場所に表示されているため、アイコンの番号2の下にアイコン2のボックスが表示されません。それは理にかなっていますか？私が欲しいのは、箱がそのアイコンの右の同じ場所に現れることです。そして、私が望むように多くのアイコン（そしてドロップダウンボックス）を追加できるようにしたい。ここに私のコードは次のとおりです。JQueryを使用して項目のグリッドの下に別のドロップを切り替えるにはどうすればいいですか？

jQueryの

事前に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script> 

<script> 
$(function() { 

$(".name").click(function() { 
    $(".drop").toggle("slow"); 
}); 

    $('.grid').isotope({ 
    // options... 
    itemSelector: '.grid-item', 
    masonry: { 
columnWidth: 100 
    } 
}); 

}); 
</script>

CSS

.grid { 
margin: auto; 
margin-bottom: 50px; 
max-width: 600px; 
height: 100%; 
} 

.grid:after { 
display: block; 
clear: both; 
content: ''; 
} 

.grid-item { 
position: relative; 
float: left; 
overflow: hidden; 
margin: 10px; 
width: 150px; 
height: 150px; 
} 

.grid-item img { 
height: 100px; 
width: 100px; 
} 

.icon { 
position: absolute; 
top: 0; 
right: 0; 
    border: 5px solid #f3f3f3; 
    height: 100px; 
    width: 100px; 
} 

.name { 
background-color: #000; 
color:#fff; 
font-size: 8px; 
font-family: 'silkscreen'; 
position: relative; 
margin-top: 115px; 
padding:3px; 
margin-left: 40px; 
border: none; 
text-align: left; 
width: 150px; 
} 

.name:focus { 
outline: 0; 
} 

.drop { 
height: 300px; 
width: 300px; 
position: absolute; 
left: 50px; 
top: 150px; 
font-size: 10px; 
display: none; 
}

HTML

<body> 
<div class="grid"> 
    <div class="grid-item"> 
    <div class="icon"><img src="http://i.imgur.com/aN7vtIU.png"></div> 
    <button class="name">NAME</button> 
<div class="drop">DROPDOWN TEXT</div> 
    </div> 


    <div class="grid-item"> 
    <div class="icon"> 
     <img src="http://i.imgur.com/aN7vtIU.png"> 
    </div> 
    <button class="name">NAME</button> 
<div class="drop">DROPDOWN TEXT</div> 
    </div> 

</div> 
</body>

多くのおかげで！私はこの1日を無駄にすることを試みてきました。

出典

2016-08-10 mari

問題はセレクタが広すぎることです。 jQueryは、.nameクラスのすべての要素を検索し、がクリックされたときに.dropクラスを持つすべての要素を見つけて、それらを切り替えることです。

クリックした.name要素に関連する.dropにトグルを適用するには、DOMを横断する必要があります。このトラバーサルが含まれています：

旅行まで、最寄り.grid-item親
に階層が.grid-item
だけその

ORIGINALに.toggle()を適用した後に言った次の隣接.dropの要素を見つける：このようにトラバースすることで、より具体的になり、トグルしたい正確な要素のみを選択することができます。

$('.name').click(function() { 
    $(this) // wrap this, it always refers to the clicked event element 
     .parents('.grid-item') // find parent grid item 
     .next('.drop') // find adjacent drop 
     .toggle('slow'); // only toggle that one element 
});

EDIT：.dropは今内部.grid-elementている処理するコードのアップデート（詳細はコメントを参照してください）。

HTML構造を変更すると、非常に特定のDOMトラバーサルをそれに応じて更新する必要があることに注意してください。

のように、HTML構造が非常に脆弱です。 .dropを .grid-itemの中に入れておくことをおすすめします。このようにして、全体が1つの自己完結型ユニットになります。CSSを使用して簡単に達成でき、 .dropを絶対的に top: 100%に配置するという項目の下にドロップする必要がある場合。

出典

2016-08-10 04:52:44 Soviut

恐ろしい！ありがとうございました。私が今ある唯一の問題は、ボタンがクリックで何もしないことです。テキストはそこにあり、ボックスはアイコンに対して相対的に表示されていますが、これは表示なしです：none; .drop {。一度追加すると、名前ボタンをクリックしてもそれを切り替えることはできません。サイドノートにも感謝します！私はそれに応じて今働いているhtmlを変更しました。 – mari

ドロップ要素がボタンを覆っていないことを確認してください。カーソルを置くと、ボタンがハイライト表示されます。さらに、ChromeまたはFirefoxでインスペクタを使用して要素を強調表示し、要素の位置を確認することができます。 – Soviut

私があなたに送ったjqueryはもう働きません。それは '.drop'を' .grid-item'で探しているので、 '.grid-item'の中に入れました。子/子孫を見つけるには '.find（）'を使う必要があります。回答はそれに従って更新されました。 – Soviut

JQueryを使用して項目のグリッドの下に別のドロップを切り替えるにはどうすればいいですか？

jQueryの

CSS

HTML

答えて

関連する問題