Question

Here is the link，
我希望侧栏与我的链接中显示的相同我想要在不同标签上随我的选择一起移动的指针。示例home，charts等。所以任何人都可以帮助我使用jquery。

HTML

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class = "active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a href="#">
                <i class="fa fa-home fa-fw"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-signal"></i>
                <span>Charts</span>
            </a>
        </li>
        <li>
            <a class="" href="#">
                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
                    <i class="fa fa-group"></i>Asset
                </span>
            </a>
            <ul class="children nav-child unstyled small collapse" id="sub-item-1">
                <li class="item-2 deeper parent active">
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                        <i class="fa fa-frown-o"></i>
                        </span>pending
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-plus"></i> </i>
                        </span>ADD
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-stack-exchange"></i>
                        </span>Stock
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-bullseye"></i>
                        </span>View all
                    </li>
                </li>
            </ul>
        </li>
        <li>
            <a class="" href="#">
                <span data-toggle="collapse" data-parent="#menu-group-2" href="#sub-item-2" class="sign">
                    <i class="fa fa-shopping-cart"></i>Vendor
                </span>
            </a>
            <ul class="children nav-child unstyled small collapse" id="sub-item-2">
                <li class="item-2 deeper parent active">
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-2">
                            <i class="fa fa-plus"></i>
                        </span>ADD
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-2">
                            <i class="fa fa-eye"></i> 
                        </span>View
                    </li>
                </li>
            </ul>
        </li>
        <li> <a href="#" id="table">
            <i class="fa fa-th-large"></i>
            <span>Tables</span>
            </a>
        </li>
    </ul>
</div>

我试过这个。

JS

$(document).ready(function() {   
    $('#sidebar ul').on('click', 'li' ,function(){ 
        $(this).append("<div class="pointer">
            <div class="arrow"></div>
            <div class="arrow_border"></div>");
    });
});

Answer 1

问题出在这个

$(this).append("<div class="pointer">
  <div class="arrow"></div>
  <div class="arrow_border"></div>");

1）缺少连接，请在"

中使用'

$(this).append('<div class="pointer"><div class="arrow"></div><div class="arrow_border">/div>');

2）我认为你指的是wrong selector。

使用sidebar-nav代替sidebar

基于这些项目，我创建了JSFiddle（我添加了额外的文字以表明它正在运行）

Answer 2

您应该使用CSS类。它们比DOM操作更简单，更快。

为所有li元素添加所需的块，并通过添加类来显示它们。

我为你做了一个例子http://plnkr.co/edit/ZbA05DlRt8lajAQKuvVw?p=preview

Jquery无法改变效果？

2 个答案: