Как показать/скрыть div в кнопке

Я использую переключатель слайдов jquery, чтобы показать/скрыть div при нажатии кнопки. Можно ли поместить div В КНОПКУ? (Мне это нужно, чтобы правильно разместить навигацию в верхней части страницы, предназначенной для мобильных устройств.)

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%;
}

navigation jquery show-hide mobile-devices
person Igor Laszlo    schedule 05.10.2013    source источник
comment
Не могли бы вы пояснить, что такое кнопка in? Достаточно ли кнопки сверху?   -  person Anthony Forloney    schedule 05.10.2013
comment
У вас нет кнопки в вашем HTML, вы нажимаете на DIV. Вы, конечно, можете иметь один DIV внутри другого DIV.   -  person Barmar    schedule 05.10.2013
comment
вы говорите, что хотите, чтобы они прикреплялись к верхней части страницы, поэтому я думаю, что div можно обернуть другим div, чтобы их было легче контролировать как единое целое.   -  person GuiDocs    schedule 05.10.2013
comment
Спасибо за все ваши вопросы и ответы... см. мое решение ниже, на которое ответил Кевин Пей!   -  person Igor Laszlo    schedule 05.10.2013

Ответы (1)


arrow_upward
0
arrow_downward

Это то, что вы ищете?
JsFiddle:http://jsfiddle.net/GGtkc/ < br/> 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");
});
person Kevin Pei    schedule 05.10.2013
comment
Это именно то, что я искал, большое спасибо! Вы можете увидеть его здесь: igorlaszlo.com/mobile.html (вы должны изменить размер окна браузера на мин. 320 х 480 пикселей, как для мобильных устройств - маленькие экраны). Я хотел проголосовать за ваш ответ, но у меня недостаточно репутации, чтобы сделать это ... Осталось одно, я должен проверить, работает ли липкий эффект на мобильных устройствах или нет :) - person Igor Laszlo; 05.10.2013