0

「非表示」というボタンを押してから、ユーザーがボタンをクリックしたときに「表示」と言うことができるようにしたいと考えています。以下のコードでは、トグル部分が機能しますが、コンテンツが非表示になると、「非表示」テキストを「表示」に切り替える必要があります。

トグル コードはhttp://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33Uから取得しました。

 <script type="text/javascript">
    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }
    </script>

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="javascript:toggle('pos')">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>
4

6 に答える 6

3

あなたの質問はjQueryとタグ付けされているので、jQueryを使用してください：

<div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>


$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle(); 

    return false;
});

例: http://jsfiddle.net/calder12/KCj3r/

于 2013-04-17T17:39:52.610 に答える