垂直下拉菜单

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

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

Answer 2

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同时理解，并且会触发点击和触摸事件，所以你可以非常快速地切换两次。