垂直下拉菜單

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同時理解，並且會觸發點擊和觸摸事件，所以你可以非常快速地切換兩次。