Question

我有一个菜单，旨在为论坛保留一些链接。我希望它在点击时关闭并在点击时关闭。这是我的代码。

m/d/yy

我尝试过使用此链接作为指南。

https://stackoverflow.com/a/2937603/6147300

我已经让所有Jquery都正确，但我不知道如何使用CSS来定位我需要的目标。另外我不清楚在哪里放CSS，它是否需要在Jquery代码或我的CSS编辑器中。

有什么建议吗？

Answer 1

一个好方法是使用jQuery添加一个类，然后使用CSS定位该类的样式。请参阅下面的示例。

HTML

<ul id="menu">
 <li>Home</li>
 <li>Portfolio</li>
 <li>About Us</li>
 <li>Contact Us</li>
</ul>

<button id="toggle">Toggle Menu</button>

CSS

#menu {
  display: block;
  list-style-type: none;
  position: absolute;
  top: 0;
  right: -120px;
  width: 100px;
  background: #000;
  color: #fff;
  padding: 10px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.active {
  right: 0px !important;
}

JS

$("#toggle").on('click', function() {
  $('#menu').toggleClass("active");
});

https://jsfiddle.net/7f1kxo9f/

Answer 2

这就是你想要的：复制并保存在HTML文件中以开始测试。

<style>
  #lang-selector {
    font-size: 12px;
    height: 21px;
    margin: 7px auto 17px auto;
    width: 250px;
    font-family: Verdana;
  }

  #lang-selector span {
    color: #999;
    float: left;
    margin: 4px 0 0 87px;
    padding-right: 4px;
    text-align: right;
  }

  #lang-selector ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #lang-selector ul li a {
    padding: 3px 10px 1px 10px;
  }

  #lang-selector ul, #lang-selector a {
    width: 186px;
  }

  #lang-selector ul ul {
    display: none;
    position: absolute;
  }

  #lang-selector ul ul li{
    border-top: 1px solid #666;
    float: left;
    position: relative;
  }

  #lang-selector a {
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
    color: #666;
    display: block;
    font-size: 12px; 
    height: 17px;
    padding: 4px 10px 0 10px;
    text-align: left;
    text-decoration: none;
    width: 166px;
  }

  #lang-selector ul ul li a {
    background: #333;
    color: #999;
  }

  #lang-selector ul ul li a:hover{
    background: #c4262c;
    color: #fff;
  }
</style>
<div id="lang-selector">
  <ul>
    <li>
      <a href="#">Choose a Language</a>
      <ul>
        <li><a href="#">English</a></li>
        <li><a href="#">Deutsch</a></li>
        <li><a href="#">Italiano</a></li>
      </ul>
    </li>
  </ul> 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">

 /* Language Selector */

 $(function() {
     $("#lang-selector li:first").click(function(){
         $('ul:first',this).toggle();
     })
 });

 $(document).ready(function(){ 

  /* Navigation */
  $('.subnav-game').hide();
  $('.subnav-game:eq(0)').show();
  $('.preorder-type').hide();


  $('.preorder-type:eq(3)').show();


 });
 </script>

单击打开/关闭Jquery菜单

2 个答案: