在列表视图中展开/显示和隐藏div元素

Question

正如你所看到的，这是一个列表视图，我的任务是当你点击一个元素/ div然后div与图像展开/显示。现在很简单，即使是后端开发者，但我想： 1.当我再次点击相同的元素时，元素将隐藏。 2.当我点击另一个元素时，已经展开的元素将会隐藏，而我点击的另一个元素将展开/显示。 我需要这个Script和CSS。

<div class="row"> 
       @foreach(var post in CurrentPage.Children) 
       { 
        <div class="col-md-12"> 
         <div class="content equal" onclick="showhide()"> 
          <a href="@post.Url"> 
           <div class="date">@post.CreateDate.ToLongDateString()</div> 
           <h2>@post.Name</h2>  
           <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
          </a> 
         </div> 
         <div class="images(-expand)"> 
          <img src="@post.Image" /> 
         </div> 
        </div> 
       } 
      </div> 

Answer 1

请尝试以下操作。

$('.content.equal').click(function() { 
 
    $('.content.equal').not(this).next().slideUp(); 
 
    $(this).next().slideToggle(); 
 
}); 
 

 
$('.content.equal a').click(function(event) { 
 
    event.preventDefault(); 
 
});

.images { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div>