2

2 つの兄弟要素を表示/非表示にしたいonclick。

ページには、この表示/非表示機能を含む複数のページがdetailLinksItemあるため、兄弟のみを選択する必要があります。兄弟との両方に必要onclickです。 .style.display = 'block';.showLess.moreLinksContainer

            <div class="detailLinksItem">
                <div class="searchIcon"></div>
                <a href="#"></a>
                <a href="#"></a>
                <div class="detailDate"></div>
                <div class="arrow-down"></div>
                <a href="#" class="showMore" onclick="showStuff(moreLinksContainer); return false;">Show more</a>
                <a href="#" class="showLess" onclick="hideStuff('moreLinksContainer'); return false;" style="display: none;">Show less</a>
                <div class="moreLinksContainer" style="display: none;">
                <ul>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">6 hours</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 day</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">3 days</div></li>
                    <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 week</div></li> 
                </ul>
                </div>
            </div>
4

5 に答える 5

0

jQueryから始めることをお勧めします。これは、JavaScript開発をスピードアップするのに役立ちます。jQueryを使用する場合、uは次のことを実行できます。

  1. 現在のonclickを削除します
  2. jQUeryライブラリをヘッドに含める

  3. $（function（）{//カスタムイベントを割り当てる$（ "。showMore"）。click（function（）{$（ "。showMore"）。hide（）; //表示ボタンを非表示にする$（ "。showLess"）。 show（）; //非表示ボタンを表示$（ "。moreLinksContainer"）。slideDown（）; //効果のあるコンテナを開く}）

    $（ "。hideStuff"）。click（function（）{$（ "。showLess"）。hide（）; //非表示ボタン$（ "。showMore"）。show（）; //表示ボタン$（ ".moreLinksContainer"）。slideUp（）; //コンテナを非表示}）}）;

于 2012-05-24T21:24:14.160 に答える
0

インライン イベント宣言を追加することは避けてください。理想的には、document.ready アクションにクリック イベントを追加します。特定の要件の実際の例を次に示します: http://jsfiddle.net/P8trE/

また、「表示を減らす」リンクを非表示にするために必要なアクションもあります:)

于 2012-05-24T21:22:38.997 に答える
0

javascript を使用して detailLinksItem div にクラスを追加し、カスケード CSS を使用して適切な子要素を表示または非表示にします。

CSS:

.detailLinksItem .showLess, .detailLinksItem .moreLinksContainer {
   display: none;
}
.detailLinksItem.more .showMore {
   display: none;
}
.detailLinksItem.more .showLess, .detailLinksItem.more .moreLinksContainer {
   display: block;
}

JS:

detailLinksItemElement.className = "detailLinksItem more";
于 2012-05-24T21:25:56.003 に答える
0 
<script type="text/javascript">
    function showStuff(_container){
       var c = document.getElementsByClassName(_container);
       c[0].style.display = "block";
    }
    function hideStuff(_container){
       var c = document.getElementsByClassName(_container);
       c[0].style.display = "none";
    }
</script>
于 2012-05-24T21:19:52.640 に答える
0

あなたが言ったので、jQueryは問題ありません：

$(function(){
    // When .showMore is clicked
    ​$(".showMore").on("click", function(){
        // Of all the succeeding elements, show those with these classes
        $(this).nextAll(".showLess, .moreLinksContainer").show();    
    });​
    // When .showLess is clicked
    $(".showLess").on("click", function(){
        // Take the next element, and this element, and hide them
        $(this).next().andSelf().hide();    
    });
});

デモ: http://jsfiddle.net/EmNsT/onclickこれにより、リンクから属性を 削除できます。

<a href="#" class="showMore">Show more</a>
<a href="#" class="showLess">Show less</a>

インライン スタイルもスタイルシートに移動します。

.showLess,
.moreLinksContainer {
    display: none;
}
于 2012-05-24T21:20:35.517 に答える