interaction_javascript スキルにおける JS CSS の適用-jsチュートリアル-php.cn

interaction_javascript スキルにおける JS CSS の適用

WBOY

リリース： 2016-05-16 18:22:54

オリジナル

1382 人が閲覧しました

しかし、CSSを柔軟に適用することで、人々に明るい印象を与えることができます。

以下では、私が言いたいことを説明するために簡単な例を使用します。

CSS コード:

コードをコピーコードは次のとおりです:

 
 #nav li ul { 
display:none; 
} 

HTML コード:

コードをコピーコードは次のとおりです。

 >メニュー 1

サブメニュー 2

 ;サブメニュー 3

 ;メニュー 2 
サブメニュー 2
 /li>
サブメニュー 4

効果は次のとおりです: 

必要な効果は次のとおりです: 

1.初期状態では、すべてのサブメニューが非表示になっています。 

2. メニュー項目をクリックすると、対応するサブメニューのリストが表示されます。 

3. もう一度クリックすると、サブメニューが非表示になります。

私が半年前にやったことは次のようになります: #nav で h3 要素を取得し、ループでそれにイベントを追加します。イベントは、次の兄弟ノードが非表示であるかどうかを判断し、ステータスに応じてサブメニュー ul 要素の表示属性を変更します。
interaction_javascript スキルにおける JS CSS の適用

interaction_javascript スキルにおける JS CSS の適用

コードはおおよそ次のとおりです。 (以下のコードはすべてロジックを表現するためにのみ使用されています。実行可能かどうかは気にしないでください。)

コードをコピー

コードは次のとおりです:

var els = [...]; //コードは h3 要素配列を取得します。
for(var i=0; i els[i].addEventListener("click",function() { var target = this.nextSibling; if(target.style.display == "none") target.style.display = "block"; else target.style.display = "none" }, false) ; }

 
1 か月前は、おそらく次のようなアプローチでした。イベントを #nav > ul に直接追加し、そのイベント内のターゲット オブジェクトが h3 オブジェクトであるかどうかを判断します。その場合は、次の兄弟ノードを取得し、その表示ステータスに従って表示属性を変更します。 
コードはおおよそ次のとおりです: 

コードをコピー

 コードは次のとおりです:

varcontainer = document.getElementById("nav");
container.addEventListener("click", function(e) {

var target = e.target, list; if(target.tagName = = "H3") { list = target.nextSibling; if(list.style.display === "none") list.style.display = "block"; 🎜> list.style.display = "none"; } }, false);

 
どちらが良いかは自分で決めてください。 
少し前にリクエストを行ったところ、コード内に別のアイデアが見つかりました。これがここで話したいことです。CSS を使用してインタラクションを完了します。 
コードはそのままです: 
CSS コード: 

コードをコピーします

 コードは次のとおりです:

#nav li.menu ul {
display:block;
}

JS コードはおおよそ次のとおりです: コードをコピーします

 コードは次のとおりです。 

var el = document.getElementById("nav");

el.addEventListener( "クリック", function(e) {
var target = e.target.parentNode;
if(target.tagName == "LI") {

if(target.className == "") target.className = "メニュー"; }else { target.className = ""; }
Looking at the code, it seems that the third method is almost the same as the second one.
Well~~, what if clicking on the h3 element not only changes the display state of the next ul element, but also changes the background pattern of h3?
At this time, the second method needs to modify the value according to the background attribute of h3, while the third method only needs to add a style: #nav li.menu h3{background:url(...)}.

There is nothing else to say. Everyone has their own judgment, and they have their own judgments about which one is better and which one is worse.

PS:
If there is another style sheet on a page that affects your style, there will be a priority issue. We all know the priority of id, class and tag, but for an expression, how is its priority calculated?
Please google it, or take a look at "The CSS Priority Again " first.