jQuery 显示/隐藏规则

Question

基本上我试图显示隐藏的 div 和链接，但遇到了一些麻烦。所需功能如下:

• 页面加载时，DIV ID“additional-linguals”被隐藏
• 用户可以点击“选定的其他语言”链接，该链接将显示“其他语言”DIV
• 点击此链接后，该链接将被隐藏
• 然后，用户可以通过点击“隐藏”链接来选择隐藏“其他语言”DIV
• 点击此链接后，“选定的其他语言”链接将重新出现

这是我到目前为止所做的:

标记:

<div class="row">
    <label for="native_language">Select</label>
    <select name="native_language" id="native_language">
      <option value="">Any</option>
      <option value="1">English</option>
    </select>

    <a class="show-additional-link" href="#">Select Additional Languages</a>
</div>

<div id="additional-languages" style="display: none;">
    <a class="hide-additional-link" href="#">[hide]</a>

    <div class="row">
        <!-- additional language checkboxes -->
    </div>
</div>

JS:

$('.show-additional-link').click(function(){
    $(this).parent().next().slideDown();
    $(this).hide();
    return false;
});

第一部分对我有用，但我正在努力让第二部分工作，即“隐藏附加链接”的功能。我已经尝试过:

$('.hide-additional-link').click(function(){
    $(this).parent().slideUp();
    $(this).parent().prev('.show-additional-link').show();
    return false;
});

DIV 被隐藏，但“show-additional-link”未显示。

Answer 1

更改此:

$(this).prev('.show-additional-link').show();

对此:

$(this).parent().prev("div.row").find('.show-additional-link').show();

.prev将严格针对前一个 sibling 。您的.show-additional-link按钮是前一个 div 的子级，因此基本上您需要上一级，获取前一个 div，然后找到 .show-additional-link后裔。