单击时的垂直下拉菜单

Question

您好，我正在尝试在此处制作此菜单的精确副本：http://bmw-spanos.gr/master_en/en/contact_info.asp

查看下图：

这是我的代码，之前很抱歉。我的问题主要是下拉菜单（虚线图像），我希望它在点击时向下并在图像上留下一个大空间

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
    body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}


    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}

    .dropdown dt a {background:#fff; display:block; padding-right:20px; width:221px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#fff none repeat scroll 0 0;  color:blue; display:none;
                      left:0px; padding:5px 0px;  top:2px; width:221px; list-style:none; padding-right:20px;  }
    .dropdown span.value { display:none; }
    .dropdown dd ul li a { padding:5px; display:block; }
    .dropdown dd ul li a:hover { color:blue;}

    .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
    .flagvisibility { display:none;}


</style>
<script type="text/javascript">
    $(document).ready(function() {
        $(".dropdown img.flag").addClass("flagvisibility");

        $(".dropdown dt a").click(function() {
            $(".dropdown dd ul").toggle();
        });

        $(".dropdown dd ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });

        function getSelectedValue(id) {
            return $("#" + id).find("dt a span.value").html();
        }

        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown dd ul").hide();
        });


        $("#flagSwitcher").click(function() {
            $(".dropdown img.flag").toggleClass("flagvisibility");
        });
    });
</script>

<dl id="sample" class="dropdown">
    <dt><a href="#"><span>Επικοινωνία</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Ζητήστε Πληροφορίες<img class="flag" src="br.png" alt="" /><span class="value">BR</span></a></li>
            <li><a href="#"> Ραντεβού για Service<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></a></li>
            <li><a href="#"> Ραντεβού για Test Drive<img class="flag" src="de.png" alt="" /><span class="value">DE</span></a></li>
            <li><a href="#"> Guestbook<img class="flag" src="in.png" alt="" /><span class="value">IN</span></a></li>
        </ul>
    </dd>
</dl>

Answer 1

li ul{
    display: none;
}
li ul.Open{
    display: block;
}

$('li').has('ul').on('click', function(){
    $(this).find('ul').toggleClass('Open')
});

我是通过一个班级做到这一点的。您不需要开放变量，那么您需要.toggle() 而不是toggleClass()。一个类结合css3提供了更多的可能性。

这是基于这样的html（很常见）：

<ul>
    <li>Items</li>
    <li>Items</li>
    <li>
        Items with submenu
        <ul>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>
    </li>
</ul>

jsFiddle demo

---

请注意，点击在 iDevices 上不起作用，您需要 touchstart/touchend 才能做到这一点。你不能同时添加两者，因为 android 都理解，并且会触发点击和触摸事件，所以你切换两次真的很快。

Answer 2

只有 css 的解决方案：

根据您要支持的浏览器，您可以使用复选框作为第一个元素，并在您的 css 中使用 :checked：

jsFiddle

HTML：

<ul id="topmenu">
    <li><input type="checkbox" id="menu-checkbox"/><label for="menu-checkbox">Menu</label>
        <ul>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>
    </li>
</ul>

CSS：

#topmenu ul{
    display:none;
}
#menu-checkbox:checked + ul {
    display:block;
}

然后您将使用 CSS 来设置复选框的样式。适用于 IE9+。