0

jquery スライド トグルを使用して、bttn をクリックしたときに div を表示/非表示にします。div を THE BUTTON に配置することは可能ですか? （モバイルデバイス用のページの上部にナビゲーションを適切に貼り付けることができるようにするためにこれが必要です。）

HTML

<div class="medianavbttn">Show Menu</div>

<div class="medianav">
    <ul id="medianav-links">
        <li class="current"><a href="#section1">About</a></li>
        <li><a href="#section2">Gallery Photos</a></li>
        <li><a href="#section3">Contact</a></li>
    </ul>
</div>

スクリプト

<script>
$(".medianavbttn").on("click", function(){
    $(".medianav").slideToggle("slow");
    $(this).text($(this).text() == "Show Menu" ? "Hide Menu" : "Show Menu");
});
</script>

CSS

.medianavbttn {
position: relative;
display:block;
width: 100%;
height: 30px;
top: 0;
left: 0;
cursor: pointer;
}

.medianav {
position: relative;
display: none;
width: 100%;
}
4

1 に答える 1

0

これはあなたが探しているものですか？
JsFiddle : http://jsfiddle.net/GGtkc/
HTML :

<div class="medianavbttn">
    <span class="showbutton">Show Menu</span>

<div class="medianav">
    <ul id="medianav-links">
        <li class="current"><a href="#section1">About</a></li>
        <li><a href="#section2">Gallery Photos</a></li>
        <li><a href="#section3">Contact</a></li>
    </ul>
</div>
</div>

JS:

$(".medianavbttn").on("click", function(){
    $(".medianav").slideToggle("slow");
    $(this).find('.showbutton').text($(this).find('.showbutton').text() == "Show Menu" ? "Hide Menu" : "Show Menu");
});
于 2013-10-05T02:14:01.600 に答える