顯示/隱藏按鈕消失

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()（不帶任何參數）將獲得按鈕的當前文本。我存儲它，然後根據當前設置的內容進行交換，並在「隱藏」或「包含」之間切換。

你也可以做到以下任何一項：

• 創建兩個按鈕和兩個單擊處理。第一個顯示按鈕將顯示「隱藏」按鈕，顯示內容，並隱藏「顯示」按鈕。第二個隱藏按鈕將做相反的事情。
• 如果顯示內容（在函數之外），則設置一個布爾值。然後，一個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>