の表示/非表示ボタンが

Question

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#incl").toggle(500); 
 
    $(this).hide(); 
 
    $("button").text('hide'); 
 
    }); 
 
});

#incl { 
 
    display: none; 
 
} 
 
.incl { 
 
    position: absolute; 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    margin: -197px -10px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("button").click(function() { 
 
     $("#incl").toggle(500); 
 
     $(this).hide(); 
 
     $("button").text('hide'); 
 
    }); 
 
    }); 
 
</script> 
 

 
<button>INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
    <li>bla bla bla</li> 
 
    <li>bla ti bla</li> 
 
    <li>bla bla</li> 
 
    </ul> 
 
</div>

を消えます。 私は何をしたいのですか？エコー "含む"は、代わりに "隠す"エコーする必要があります 私はアイテムの詳細を表示し、それらを非表示にするボタンを作ろうとしています。

Answer 1

これはあなたが探しているものです。 $(this).text()（パラメータなし）を使用すると、ボタンの現在のテキストが取得されます。私はそれを保存し、それが現在設定されているものに基づいてスワップし、「隠し」または「インクルード」の間で切り替える。

また、次のいずれかの操作を行うことができます。

• は二つのボタン、および2つのクリックハンドラを作成します。 1st showボタンは "hide"ボタンを表示し、内容を表示し、 "show"ボタンを隠す。 2番目の非表示ボタンは反対の操作を行います。
• 内容が表示されている場合（関数外）はブール値を設定します。そして、1のif/else文は、それが設定されていないかどうかを判断します：

if (contentShown) 
{ 
    $('#content').hide(); 
    $('#button').text('Show'); 
} 
else 
{ 
    $('#content').show(); 
    $('#button').text('Hide'); 
} 
contentShown = !contentShown; //Invert contentShown (Set it to true if false, or false if true) 

注意してください、私は以下のスニペットでそれを示すために、CSSでマージン/位置をコメントアウト。

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
     $("#incl").toggle(500); 
 
     var currentText = $(this).text(); 
 
     $(this).text(currentText == "INCLUDES" ? "HIDE" : "INCLUDES"); 
 
    }); 
 
    });

#incl { 
 
    display: none; 
 
} 
 
.incl { 
 
    /*position: absolute;*/ 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    /*margin: -197px -10px 0 0;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<button id="toggle">INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
    <li>bla bla bla</li> 
 
    <li>bla ti bla</li> 
 
    <li>bla bla</li> 
 
    </ul> 
 
</div>

Answer 2

あなたのボタンが消失する理由は、この行です：クリックハンドラ内

$(this).hide(); 

。

さらに、クラスを含むは、の余白を持ちます。-197px -10px 0 0;これは、コンテンツを表示するときにこれを調整する必要があることを意味します。

あなたが行うには正しい行動を決定するために、ボタンのテキストをテストすることが、あなたのクリックハンドラで

：

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#incl").toggle(500); 
 
    var sign = '-'; 
 
    var txt = 'INCLUDES'; 
 
    // 
 
    // According to the button text you can decide 
 
    // the next button text and if you need 
 
    // to correct the margings of your element 
 
    // adding or removing for the margins. 
 
    // 
 
    if (this.textContent == 'INCLUDES') { 
 
     sign = '+'; 
 
     txt = 'hide'; 
 
    } 
 
    $('.incl').animate({"margin-top": sign + "=197px", "margin-right": sign + "=10px"}, 500) 
 
    $("button").text(txt); 
 
    }); 
 
});

#incl { 
 
    display: none; 
 
} 
 

 
.incl { 
 
    position: absolute; 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    margin: -197px -10px 0 0; 
 
}

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

 

 
<button>INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
     <li>bla bla bla</li> 
 
     <li>bla ti bla</li> 
 
     <li>bla bla</li> 
 
    </ul> 
 
</div>