Question

我的模板中有以下代码（htmls，css）。我不确定为什么这个设计像ul - ＆gt; li - ＆gt; ul - ＆gt; li方式。

<div id="limiter">
                <label>View: </label>
       <ul id="viewBy">
                <li id="viewByli5"><a onclick="javascript:loadRequiredProducts()" href="#">5<span class="right-arrow"></span></a>
                <ul id="viewBy2">
                  <li id="viewByli6"><a onclick="javascript:loadRequiredProducts()" href="#">6</a></li>
                  <li id="viewByli7"><a onclick="javascript:loadRequiredProducts()" href="#">7</a></li>
                </ul>
              </li>
            </ul>
<div>

dropdown appears like this 和我加载所选产品的javascript在

之下

   function loadRequiredProducts() {

        var ul = document.getElementById('viewBy2');
        ul.onclick = function(event) {
        var target = getEventTarget(event);
        var range = target.innerHTML;
        range = range.replace(/[^0-9]/g, '');
        var max = parseInt(0,10) + parseInt(range,10);

    // here I call another javascript function which makes ajax call and loads the products  
        } 
    }
 function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement; 
    }

一切正常。但我无法找到一种方法来显示下拉列表中的所选数量（不是真正的下拉列表，而是父项ul）。即使点击6或7并装载6或7个产品，它也始终显示5。

有人可以帮我建议吗？提前谢谢。

围绕这段html代码的css如下。（限制器是父div标签名称）

    #limiter {
    float: right;
    font-size: 14px;
    margin-top: 0px;
}
#limiter ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
}
#limiter a:link, #limiter a:visited {
    text-decoration: none;
    background-color: #f8f8f8;
    border: 0px solid #ddd;
    border-radius: 0px;
    display: inline-block;
    padding: 0px;
}
#limiter li {
    background: none repeat scroll 0 0 #f8f8f8;
    cursor: pointer;
    margin: 0 auto;
    outline: medium none;
    padding: 5px 0px 5px 10px;
    position: relative;
    width: 50px;
    float: left;
    color: #333;
    text-align: left;
    border: 1px solid #eaeaea;
}
#limiter .right-arrow {
    float: right;
    margin-left: 6px;
}
#limiter li li {
    width: 50px;
    border-top: 0px #f5f5f5 solid;
}
#limiter li li a:hover {
    color: #FFD400;
}
#limiter li:hover {
    color: #fff;
}
#limiter ul ul {
    position: absolute;
    visibility: hidden;
    left: -1px;
    top: 27px;
    background: none repeat scroll 0 0 #fff;
    z-index: 10000;
    color: #000;
    border-top: none;
    border: 0px #f5f5f5 solid;
}
#limiter ul ul ul {
    position: absolute;
    left: 100%;
    top: -2px;
    border: solid 1px transparent;
}
#limiter li:hover > ul {
    visibility: visible;
}

对于改进编码标准的任何建议都表示赞赏。

Answer 1

你可以发布你的CSS吗？也许你可以试试

ul>li>ul>li{
    display: inline-block;
}

未排序的列表和列表ul li - 垂直列表 - 选择子项onclick

1 个答案: