Question

你好我试着在这里制作这个菜单的精确复制品：http://bmw-spanos.gr/master_en/en/contact_info.asp

请查看下面的图片： enter image description here

这是我的代码，对不起。我的问题主要是下拉（虚线图像）我希望它在点击时下降并留下像图像上的大空间

<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 +。

点击垂直下拉菜单

2 个答案: