草庐IT

javascript - 仅使元素符号可点击

coder 2023-08-07 原文

我正在开发一个使用无序列表设计的菜单，每个列表元素都包含指向另一个页面的链接。但是，我还希望能够单击每个元素符号点以打开更多子类别，这些子类别也将链接到其他页面。

基本上，我希望能够在链接上单击一次并将其转到正确的页面，但我还想单击要点并将其扩展到子类别中。我一直在研究如何将元素符号与 li 的内容分开，但在我的情况下似乎不起作用，可能是因为我的 li 包含很多子类别。这是一个例子:

<li id="m2l1" class="child">
    <a href="#">Y</a>
        <ul id="u11">
            <li class="gchild"><a href="#">Y.1</a></li>
            <li class="gchild"><a href="#">Y.2</a></li>
            <li class="gchild"><a href="#">Y.3</a></li>
            <li class="gchild"><a href="#">Y.4</a></li>
            <li class="gchild"><a href="#">Y.5</a></li>
            <li class="gchild"><a href="#">Y.6</a></li>
            <li class="gchild"><a href="#">Y.7</a></li>
            <li class="gchild"><a href="#">Y.8</a></li>
            <li class="gchild"><a href="#">Y.9</a></li>
        </ul>
</li>

对于如何将元素符号与我的案例中的文本分开，有人有什么建议吗？

这是链接:http://jsfiddle.net/stamblerre/XYp48/17/

谢谢!!!

最佳答案

您的 HTML 无效。 ul 中不能有 div。此外，您可以通过将每个 li 的单独逻辑移动到一个通用处理程序中来极大地简化您的代码。

像这样:

演示:http://jsfiddle.net/abhitalks/XYp48/18/

CSS:

ul {
    display: none;
    overflow: hidden;
}
ul:first-child {
    display: block;
}

JS:

$("li").on("click", function () {
    $(this).children("ul").slideToggle();
    return false;
});

编辑:

我故意忽略了 a 的检查，因为单击 a 会导航到相应的页面(如您的问题中所述)，因此展开/折叠无关紧要.

但是，根据您的评论，如果您真的想从处理程序中完全删除 a，那么您可以使用事件目标来处理没有 a 的 li 。像这样:

演示 2:http://jsfiddle.net/abhitalks/XYp48/22/

JS:

$("li").on("click", function (e) {
    var $t = $(e.target); // get the event target as a jQuery object
    if (!$t.is('a')) { // check if the target is not an anchor
        $(this).children("ul").slideToggle();
        return false;
    }
    // otherwise if target is anchor, then do nothing
});

关于javascript - 仅使元素符号可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24245493/

可点元素符号34codegtjavascriptjqueryhtmlcss

有关javascript - 仅使元素符号可点击的更多相关文章

  1. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  2. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  3. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  4. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  5. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  6. ruby - 如果它是标点符号，我怎么能从字符串中删除最后一个字符，在 ruby​​ 中？ - 2

    啊，正则表达式有点困惑。我正在尝试删除字符串末尾所有可能的标点符号:ifstr[str.length-1]=='?'||str[str.length-1]=='.'||str[str.length-1]=='!'orstr[str.length-1]==','||str[str.length-1]==';'str.chomp!end我相信有更好的方法来做到这一点。有什么指点吗？ 最佳答案 str.sub!(/[?.!,;]?$/,'')[?.!,;]-字符类。匹配这5个字符中的任何一个(注意，。在字符类中并不特殊)?-前一个字符或组

  7. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - 如何在 Ruby 字符串中插入项目符号字符？ - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？ 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195

  10. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

随机推荐