Question

我正在开发一个网站，当屏幕很小时，就像移动设备一样，它会创建一个悬停菜单按钮。

我的悬停菜单按钮的html代码和菜单如下所示。在班级mnav-button lt768中，按钮出现，班级mobile-nav-wrap lt768包含菜单本身。

我的问题是我从网站上获得了这个例子

http://whiteboard.is/

我不知道当用户在课程mnav-button lt768中点击时，他们如何让弹出菜单显示出来。

如何在div类mnav-button lt768中点击一下时显示菜单。

另请注意，当用户点击div <div class="close-btn"></div>

时，菜单会关闭

这是Html，

<div class="mnav-button lt768"></div>
    <div class="mobile-nav-wrap lt768">
        <nav class="mobile-nav">
            <div class="close-btn"></div>
            <a href="#" class="home">
                <span>Home</span>
            </a>
            <a href="#">
                <span>Company</span>
            </a>
            <a href="#">
                <span>Work</span>
            </a>
            <a href="#">
                <span>Space</span>
            </a>
        </nav>
    </div>

所以这仍然不起作用我上传了网站，所以你们都可以在kewsplus.com/testing

访问它

Answer 1

你想要这样的效果吗？ DEMO

HTML：

<div id="header">
<button class="main-nav">push me</button>
</div>
<div id="content">
<div class="media-content">
</div>
<div class="mobile-nav">
    <button class="close" value="close">close</button>
    <ul>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
    </ul>
</div>

JS：

$(document).ready(
function() {
    $("button.main-nav").click(function() {
        $(".mobile-nav").fadeIn(1000);
    });
    $("button.close").click(function() {
        $(".mobile-nav").fadeOut(1000);
    });
});

Answer 2

在http://whiteboard.is上，我们使用一段简单的jQuery风格的JavaScript来检测移动导航按钮的点击（或触摸），我们使用该事件来添加/删除正文中的类。然后，在CSS中，我们使用此类更改来隐藏/显示移动导航。

使用Javascript：

// We're going to use the "touchstart" event since we're aiming this as touch devices, not desktop devices
$('body').on('touchstart','.mnav-btn',function(event){
    // let's prevent the default action
    event.preventDefault(); 

    // trigger the class change
    $('body').addClass('mnav-open');
});

// then, the close button
$('.mnav').on('touchstart','.close-btn',function(event){
    event.preventDefault();
    $('body').removeClass('mnav-open');
});

// OR -- if you don't want your site to require the close button, and the nav button will always be present, you can use this instead
$('body').on('touchstart','.mnav-btn',function(event){
    event.preventDefault(); 
    // Will add the class if it doesn't exist, and remove it if it does
    $('body').toggleClass('mnav-open');
});

基本款式：

.mnav {
    // put design styles here
    display:none; // keeps the nav hidden until the class .mnav-open is added to body
}

.mnav-open .mnav {
   display:block;
}

应该这样做。

单击div时如何显示弹出菜单

2 个答案: