logo标签列表

使用jQuery创建类似下拉选择框的列表？

jquerycssselect
5

请注意，我想模拟下拉选择框，但只有链接，没有表单。 问题是如何在当前位置有所选、可见的类别或子类别链接？

<ul><li>Category
   <ul>
     <li>Subcategory1</li>
     <li>Subcategory2</li>
   </ul>
</li></ul>

当您在分类页面时，可见的是分类名称，这很容易因为它是第一个LI，但是当您在子类别页面时，子类别名称将会被“选中”并显示。

如果您有其他解决方案，请列出并建议我。

对不起我的英语不好，我不知道如何更好地解释 :)

欢迎来到StackOverflow！很棒的第一个问题。 - Sampson
4个回答
2

如果我理解正确，你只需要几个 div 元素。一个用于显示当前选定的项目，另一个用于显示整个菜单（减去当前元素？）。

如果是这样的话，你可以为每个菜单项附加一个点击事件，以更新顶部 div 的文本：

<div id="current_page">Default Value</div>
<div id="current_menu">
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
  </ul>
</div>

然后，您将使用jQuery添加一些效果和逻辑：
$("#current_page").click(function(){
  $("#current_menu").slideToggle();
});

$("#current_menu a").click(function(event){
  event.preventDefault(); //prevent synchronous loading
  $("#current_page").html($(this).text());
});
0

每次点击后，您需要通过迭代列表项并根据当前位置进行检查来设置相应 li 的类：

<div id="div1">
    <ul>
    <li>Category
        <ul>
            <li><a href="abc">Subcategory1</a></li>
            <li><a href="xyz">Subcategory2</a></li>
        </ul>
    </li>
    </ul>
</div>

然后是你的JavaScript代码：

var loc = window.location;
$("#div1 li").each( function(){
    var a = $("a", this).attr("href");
    if(a == loc){
        $(this).addClass("hilight");
    } else {
        $(this).removeClass("hilight");
    }
});
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接