Question

我是查询的新手，这可能非常简单：）现在，当你点击详细信息按钮时，它会显示一个弹出式div，这很好。现在我想弄清楚如果用户再次点击相同的详细信息按钮，我可以隐藏弹出窗口div。任何帮助将不胜感激！

    <script type="text/javascript">
    $(document).ready(function() {
        $(".details").click(function() {
            $(this).parents('h1').next('.popup').fadeIn(1000);              
        });     
});       
</script>


                <h1>We look good together<span class="details">Details</span></h1>

            <div class="popup">
                <ul>
                    <li>852</li><!--Square Foot goes here-->
                    <li>2</li><!--Bedrooms goes here-->
                    <li>1</li><!--Bathrooms goes here-->
                    <li>$134,900</li><!--Price goes here-->                 
                </ul>               
            </div>

Answer 1

使用fadeToggle()代替fadeIn()

$(document).ready(function() {
  $(".details").click(function() {
    $(this).parents('h3').next('.popup').fadeToggle(1000);              
  });     
});

.details { display: block; cursor: pointer; font-weight: 600 }
.popup { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h3>We look good together<span class="details">Details</span></h3>

<div class="popup">
  <ul>
    <li>852</li><!--Square Foot goes here-->
    <li>2</li><!--Bedrooms goes here-->
    <li>1</li><!--Bathrooms goes here-->
    <li>$134,900</li><!--Price goes here-->                 
  </ul>               
</div>

jQuery fadeToggle()

需要通过单击jquery中的相同按钮来显示和隐藏div

1 个答案: