javascript - 如果子 ul 没有可见元素，则隐藏字段集

Question

我在这里想做的是隐藏字段集，如果它的子 ul 元素没有可见的 li 元素。

示例代码:

$(document).ready(function () {
	$('.readBtn').click(function () {
		var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

		$('#chapter_'+chapterID).slideUp();
	});
})

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>

我不知道如何去做我想做的事情。我读过jquery selector question: do something only if all elements are hidden但我不确定如何让它与我的代码一起工作。看起来这个答案是符合我需要的，但我不知道如何改变它。

Answer 1

尝试利用 .slideUp() 处的回调来选择，.hide() .closest() fieldset

$(document).ready(function () {
    $('.readBtn').click(function () {
        var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

        $('#chapter_'+chapterID).slideUp(function() {
          if (!$(this).is(":visible") 
             && !$(this).siblings("li").is(":visible")) {
            // hide `fieldset`
            $(this).closest("fieldset").hide()
          }
        });

    });
})

$(document).ready(function () {
	$('.readBtn').click(function () {
		var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

		$('#chapter_'+chapterID).slideUp(function() {
          if (!$(this).is(":visible") && !$(this).siblings("li").is(":visible")) {
            $(this).closest("fieldset").hide()
          }
        });

	});
})

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>