Question

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

在页面加载时，隐藏了DIV ID“其他语言”
用户可以点击“选择其他语言”链接，该链接将显示“其他语言”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'的功能。我试过这个：

$('.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将严格地定位前一个兄弟姐妹。你的.show-additional-link按钮是前一个div的子节点，所以基本上你需要上升一级，获得前一个div，然后找到.show-additional-link后代。

Answer 2

如果是我，我会选择$(".show-additional-link")以获得可读性和可扩展性。您希望UI设计人员能够轻松地在页面上移动HTML，而无需触摸javascript代码。

如果页面上有多个.show-additional-link，请开始为其提供ID

Answer 3

你必须使用

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

因为.show-additional-link 里面是 prev元素。

祝你好运！

Answer 4

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

Answer 5

karim79回答的原因：你的hide-additional-link函数正在使用类'show-additional-link'查看上一个兄弟项目的＃additional-languages上下文。它需要查看.row。

jQuery显示/隐藏规则

5 个答案: