Question

我有一个像这样的div列表：

<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>

加载页面时，会显示具有id内容的第一个div。我想做的是当我点击其他div（id =＆＃34; item＆＃34;）来隐藏上一个点击项目的内容并对之前点击的div做一些更改（id =＆＃34 ;项目＆＃34）。到目前为止，我已经尝试过这个：

$(document).ready(function(){
        $(".item").first().css("border-right","none");
        $(".item").click(function(e) {
        $pressed = $(this);
             if ($pressed.data("lastclick")){
                    $pressed.data("lastclick").css("border-right","solid");
                    $pressed.data("lastclick").css("border-right-width","1px");
                    $pressed.data("lastclick").find("span").remove();
             } 
    $(this).next(".content").slideToggle(\'slow\', function() {
                 if ( $(this).is(":visible")) {
                      $pressed.css("border-right","none");
                      $pressed.append(\'<span style="float:right;font-weight:bold">\'+$(this).children().length+\'</span>\');
                      $pressed.data("lastclick",$pressed);    
            }
            });});});

Answer 1

将最后点击的项目存储在一个简单的JavaScript变量

中

var lastClicked;
$(".item").click(function(e) {
    $(this). // Do your stuff to the clicked element here

    // Then do what you will to the last-clicked element
    // ...

    // And finally assign the clicked element to the lastClicked variable
    lastClicked = clicked;
}

一些有用的提示：

如评论中所述，。是一个类选择器，＃是一个ID选择器。在您的示例中，您尝试使用类选择器按ID选择元素。
我有$(this)我可以连锁运营商。也就是说，您可以将CSS运算符与其余运算符链接起来，并使用一个单独的链接命令行，而不是重复选择器（这会浪费性能）。
您可以使用＆＃34;地图＆＃34;使用.css（）命令一次应用多个样式，如下所示：

.css（{border-right：＆＃39; solid＆＃39;，border-right-width：＆＃39; 1px＆＃39;}）

...但是在你的情况下你只是修改边框，你可以（而且应该）简单地这样做：

border-right: 1px solid black;

Answer 2

你可以通过做一些接近这个的事情来简单地编写你的代码。

<强> JSFIDDLE

$('.item').click(function(){
  $('.content').slideUp();
  $(this).next('.content').slideDown()        
})

最后点击的元素

2 个答案: