Question

以下是codepen：http://codepen.io/anon/pen/pvQYog

代码布局：

HTML

<center>  
<div style="vertical-align:top;">

    <ul class="navbar cf">

            <!-- <li><a href="#">item 2</a></li> -->
            <li style="width:200px;"><a href="#" class="ActiveListItem">Category</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                                <li><a href="#">More...</a>
                        <ul>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li><a href="#">11</a></li>
                            <li><a href="#">12</a>

                        </ul>
                    </li> 

                </ul>
            </li>

        </ul>
       </div>

CSS

/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:gray;
  border-width:1px;
  width: 200px;
  border-radius: 4px;

}


.ActiveListItem:after {
    content: '\25BC';
    float:right;
    font-weight:bold;
    padding: 0px 0px;
    font-size:100%;


}




ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black;
    border-style:solid;
    border-color:white;
    border-radius:14px;
    padding:3px 5px !important;
    font-weight:normal !important;
    margin-left:14px;/* got the activeitem centered with the list text this way*/
    margin-right:0px;

}

ul.navbar li {


    position: relative;
}

ul.navbar li a {

    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#a6d0e1;
    color: #333;
    font-weight:900;
}

ul.navbar li ul {

    margin-top: 1px;     /*Dictates how far away textbox is from list items*/
    position: absolute;
    background: #222;
    left: em;
    font-size: 14px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
                            0 5px 10px rgba(0,0,0,.6);
    /*transition: all .1s ease-in-out;*/              /*the sideways opener*/
}



ul.navbar li:hover > ul { opacity: 1; visibility: visible; left: 0; }

ol, ul { list-style: outside none none; }

.hidden { display: none; }

JS：

// sub menus identification
$(function() {
  $('.navbar ul li a').click(function(){
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
});

另外，第二个不那么重要的问题：是否有办法让每行显示两个项目，而不是每行一个项目？

Answer 1

用此替换您的ul.navbar li ul。并删除ul.navbar li:hover > ul。

ul.navbar li ul {
    margin-top: 1px;
    position: absolute;
    background: #222;
    font-size: 14px;
    min-width: 200px;
    display: none;
    z-index: 99;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
    0 5px 10px rgba(0,0,0,.6);
}

脚本将是 -

$(function() {
    $('.ActiveListItem').click(function(){      
        $('.navbar li ul').toggle();
    });
});

这是使用您的代码的示例。您需要修改以获得所需内容。希望这可能对你有所帮助。 http://codepen.io/khay/pen/bNQZBN

Answer 2

您需要使用onclick功能来满足您的需求，我将在下面举例说明。

<a onclick="window.open('/your url','name','scrollbars=1, width=600, height=800')" target="_blank">
    <span style="cursor:pointer">
          <p style="text-align:right;cursor:pointer;">
              <small>tester</small>
          </p>
    </span>
</a>

当您单击文本时，此功能将为您打开一个新窗口。

如何才能让这个CSS / jQuery菜单只在点击时打开，而不是悬停？

2 个答案: