Question

我有这个HTML：

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell"><a href=""><img src="images/home-btn1.gif" alt="" /><span>Link </span></a></li>
        <li class="cell"><a href=""><img src="images/home-btn2.gif" alt="" /><span>Link </span></a></li>
    </ul>
</div>

我想针对我点击过的li的范围。

以下是代码：

 $("#homepage-side-nav .cell").click(function(){

       $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");

       $(this).mouseout(function() {

          $(this .span).hide();

        });

  });

这里存在一个问题，我需要为跨度设置动画，而不是我点击的li ......我怎样才能做到正确？

Answer 1

试试这个。

HTML

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell">
            <a href="#">
                <img src="images/home-btn1.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
        <li class="cell">
            <a href="#">
                <img src="images/home-btn2.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
    </ul>
</div>

JS

$("#homepage-side-nav .nav .cell").click(function(){
    $(this).find('a span').animate({width:'225px'},200).css("background-color","#e5e6e7");
    $(this).mouseout(function() {
        $(this).find('a span').hide();
    });
});

https://jsfiddle.net/4kfwha44/2/

关于原始HTML / JS的说明：
- 您$("#homepage-side-nav .cell")的第一个选择器实际上并未正确附加点击事件，因为单元格类不是具有ID 主页侧面导航的div的子节点

Answer 2

您将转到特定项目：

$(this).find('span').animate({width:'225px'},200).css("background-color","#e5e6e7");

这样您就可以获得this并转到内部元素span。

Doc：https://api.jquery.com/find/

JQuery onclick目标（这个跨度）

2 个答案: