Question

基本上,我正试图展示隐藏的干.和联系,但有一些麻烦。所需功能如下:

On page load, DIV ID additional-languages is hidden
User can click the Selected Additional Languages link which will show the additional-languages DIV
At the point of clicking this link, the link will get hidden
User can then choose to hide the additional-languages DIV by clicking on the hide link
At the point of clicking this link, the Selected Additional Languages link will re-appear

在这方面,我迄今为止已经做了以下工作:

标记:

<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;
});

The first part is working for me, but I m struggling on getting the second part to work, i.e. the functionality for the hide-additional-link . I have tried this:

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

DIV是隐蔽的,但显示-附加联系没有显示。

Answer 1

修改:

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

为此:

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

<代码>.prev将严格地针对以前的兄弟姐妹。页: 1 显示-附加联系。

Answer 2

如果是我的话,我只读到$>>,以供阅读和检索。您希望,在不必触及javascript代码的情况下,国际标准化组织设计师很容易在网页上移动超文本。

如果在网页上有多个<代码>.show-additional-link,就开始给这些代码。

Answer 3

你们必须使用

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

由于<代码>.show-additional-link,inside the prev content.

亲爱!

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

回答: 你的隐藏-附加联系功能正在研究以前与阶级显示-再联系的相互交织的项目的“补充语言”。它需要研究。

友情链接