Question

好的，我有几个元素，点击它们时需要更改一个图标并显示相应的隐藏元素。我觉得我很接近，但仍然缺少某些东西，代码只能部分工作：

JavaScript的：

$(".fList").hide();
$(".features").click(function() {
    var that = this;
    var pid  = $(this).attr("id")+"C";
    $(".fList:visible").slideUp();
    $(".features .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
    $("#"+pid).slideDown(function(){
        $("span.ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
    });
});

HTML：

<table>
<tr>
  <td id="f1" class="features">
    <span class="uico ui-icon-triangle-1-e icoSpan"></span>Features
  </td>
  <td id="f2" class="features">
    <span class="uico ui-icon-triangle-1-e icoSpan"></span>Features
  </td>
</tr>
</table>

<div id="f1C" class="fList">
111111
</div>  

<div id="f2C" class="fList">
22222
</div>

我错过了什么？我需要能够关闭所有区域或只打开一个区域......

Answer 1

代码的两部分让我觉得有问题：

$(".fList:visible").slideUp();

如果.fList元素不可见，则向上滑动不会做任何事情，因此您可能只想简单地进行测试：

  $(".fList").slideUp();

另外我认为，为了使用slideDown（），该元素必须先前＆＃34;滑动＆＃34;或显示：无...但我不是100％肯定，因此当您尝试通过slideDown（）显示元素时可能会出现问题。

接下来我很困惑为什么变量that包含在以下行中：

$("span.ui-icon-triangle-1-e", that)

变量that指的是点击的元素，它似乎没有您添加或删除的任何类别 - 您确定要改变它吗？＃39 ; s班？

如果您想要两种不同的行为：1）单击已选择的div.feature，关闭另一个元素，2）单击div.feature < em>尚未被选中以便打开另一个元素。也许是这样的：

var $features = $('.features');
$features.click(function() {
    var that = this
        pid  = that.attr("id")+"C";

    if(that.hasClass('current')) {
        $features.removeClass('current');
        $("#"+pid).slideUp(500, function(){
            // Change icons etc..
        });
    } else {
        $features.removeClass('current');
        that.addClass('current');
        $(".fList").slideUp();
        $(".features .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
        $("#"+pid).slideDown(function(){
            $("span.ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
        });
    }
});

使用jQuery显示/隐藏和更改图标

1 个答案: