锚标签不起作用

时间:2015-03-16 05:40:17

标签: javascript list

我在列表中使用了不同的锚标记,但由于JavaScript文件附加到该列表,因此无效。当我删除它的JavaScript文件时它可以工作,但我也必须包含我的JavaScript。有没有办法使用锚标记工作的相同JavaScript文件?

function prepareList() {
     $('#expList').find('li:has(ul)')
         .click(function (event) {
         if (this == event.target) {
             $(this).toggleClass('expanded');
             $(this).children('ul').toggle('medium');
         }
         return false;
     })
         .addClass('collapsed')
         .children('ul').hide();
     $('#expandList')
         .unbind('click')
         .click(function () {
         $('.collapsed').addClass('expanded');
         $('.collapsed').children().show('medium');
     })
     $('#collapseList')
         .unbind('click')
         .click(function () {
         $('.collapsed').removeClass('expanded');
         $('.collapsed').children().hide('medium');
     })
 };
 $(document).ready(function () {
     prepareList()
 });

我还附上jquery-1.4.2.min.js个文件

这是我的HTML代码:

<div id="listContainer">
            <ul id="expList">
                <li>
                    <p class="exp1">INDUSTRIAL</p>
                    <ul>
                        <li>
                            <p class="exp1"><a href="fire-fighting-gallery.html">APPARELS</a></p>

                            <ul class="italic">
                                <li>
                                    <a>Coveralls</a>
                                </li>
                                <li >
                                    Uniforms
                                </li>
                                <li >
                                    <a href="fire-fighting-gallery.html">Aprons</a>
                                </li>
                                <li >
                                    Trousers
                                </li>
                                <li >
                                    Kevlar Lined Denim Jeans
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p class="exp1">GLOVES</p>
                            <ul class="italic">
                            <li >Seamless</li>
                            <li>Cut & Sewn</li>
                            <li>Leather</li>
                            <li>Mechanics</li>
                            </ul>
                        </li>
                        <li>
                            SLEEVES

                        </li>
                    </ul>
                </li>


            </ul>
        </div>

2 个答案:

答案 0 :(得分:0)

如果没有看到链接到您网页的javascript文件,我无法告诉您锚标记无法正常工作的原因。

如果在包含javascript文件后放置此链接,则链接应正常工作。

  

如果您在页面加载(动态数据)后创建了任何锚点,则只需调用Links();即可应用onclick事件处理程序,也可以手动添加{{1}在创建锚标记时。

addEventListener('click',Anchors,false)

如果您对上述源代码有任何疑问,请在下面留下您的评论。

我希望这会有所帮助。快乐的编码!

答案 1 :(得分:0)

您已将tag ID搞砸了:

 $('#expList') // <-- it was #expandList
     .unbind('click')
     .click(function () {
     $('.collapsed').addClass('expanded');
     $('.collapsed').children().show('medium');
 })

点击此处:https://jsfiddle.net/urahara/u809p5yr/

但对我来说,你想要完成什么以及如何实现仍然模糊不清。干杯;)