隱藏后如何刪除li空間？

Question

如何隱藏li並刪除其空間。 以下代碼用於在圖像之間進行轉換，但是當隱藏前一個li ，會出現空白區域。

<script type="text/javascript">
    $(document).ready(function () {
        var selectedIndex = 1;
        $("#slide" + selectedIndex + " img").fadeIn(500);
        $("ul.captios li").click(function () {
            var id = $(this).attr("id").split("_")[1];
            $("#slide" + selectedIndex + " img").fadeOut(500, function () {
                $("#slide" + id + " img").fadeIn(500);
                $("#slide" + selectedIndex).css("display:none;");
                selectedIndex = id;
            });

        });
    });
</script>

一個HTML

 <div id="gal-container">
        <div id="slides-wrapper">
            <ul class="slides">
                <li id="slide1"><img  class="hide" src="imgs/img1.jpg" /></li>
                <li id="slide2"><img  class="hide" src="imgs/img2.jpg" /></li>
            </ul>
        </div>

        <div id="caption-wrapper">
           <ul class="captios">
                <li id="caption_1"><a href="#">img1</a></li>
                <li id="caption_2"><a href="#">img2</a></li>
            </ul>
        </div>
    </div>

Answer 1

為什么不使用：

        $("#slide" + selectedIndex).hide();

??

甚至更好的可能是：

 $("#slide" + selectedIndex).fadeOut(500, function () {
      $("#slide" + id).fadeIn(500);
      selectedIndex = id;
 });

Answer 2

您正在錯誤地調用.css() 。 您可以為它傳遞一個字符串，這是CSS屬性的名稱，它將作為“獲取器”，返回該屬性的值。

或者，您可以向其傳遞兩個字符串，即CSS屬性的名稱和一個值（將充當“設置者”），以將該屬性設置為具有該值。

因此，而不是$("#slide" + selectedIndex).css("display:none;"); 您想要$("#slide" + selectedIndex).css("display", "none"); 。

Answer 3

您的代碼中有錯誤。 更改

$（“＃slide” + selectedIndex）.css（“ display：none;”）;

至

$（“＃slide” + selectedIndex）.css（{display：'none'}）; 或$（“＃slide” + selectedIndex）.css（'display'，'none'）;或

http://api.jquery.com/css/

Answer 4

您將css部分寫錯了：

$("#slide" + selectedIndex).css("display:none;"); // It will return the css 
                                                  //definition for display:none

使用此代替：

$("#slide" + selectedIndex).css('display', 'none')

或hide功能，其功能完全相同：

$("#slide" + selectedIndex).hide();

Answer 5

不知道這是否是您的問題，但是...此行不正確：

$("#slide" + selectedIndex).css("display:none;");

它應該是：

$("#slide" + selectedIndex).css('display', 'none');
// OR
$("#slide" + selectedIndex).hide();