單擊時的垂直下拉菜單

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')
});

我通過一堂課做到了這一點。 您不需要 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 演示

---

請注意，單擊在 iDevices 上不起作用，您需要 touchstart/touchend。 您不能同時添加兩者，因為 android 理解兩者，並且會觸發點擊和觸摸事件，因此您可以非常快速地切換它兩次。

Answer 2

一個 css 唯一的解決方案：

根據您要支持的瀏覽器，您可以使用復選框作為第一個元素，並在您的 css 中使用:checked ：

js小提琴

網址：

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