Question

所以我有一个我工作的团队页面，它切换一组文本和文本链接显示/隐藏。当按顺序打开和关闭链接时，一切正常，但是当点击链接而不关闭每个链接时，文本链接会不同步。

它正在记录更改链接文本的点击次数，如何根据打开或关闭的面板更改它。

感谢您的任何建议。

HTML：

<div class="people-row">
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            First
          </p>
        </div>
        <a href="#" id="1" class="toggler">
          <span class="see">
            View
          </span>
          First
        </a>
      </dd>
    </dl>
    <dl>
      <dt>
        <img src="head.jpg"/>
      </dt>
      <dd>
        <div class="block">
          <p class="person">
            Second Person
          </p>
          <p class="title">
            My Job Title
          </p>
        </div>
        <a href="#" id="2" class="toggler">
          <span class="see">
            View
          </span>
          Second
        </a>
      </dd>
    </dl>

    <div id="1-info" class="full-bio">
      <p>
        First profile content
      </p>
    </div>
    <div id="2-info" class="full-bio">
      <p>
        Second profile content
      </p>
</div>

JavaScript的：

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info").slideToggle('normal').siblings('div').hide();
    });
});
$(function() {
    $(".toggler").toggle(function() {
        $(".see").html("View");
        $('.see', this).html("Hide");
    }, function() {
        $(".see").html("View");
        $('.see', this).html("View");
    });
});

Answer 1

也许不是最优雅的解决方案，但它有效......

$(function() {
    $(".full-bio").hide();
    $(".toggler").click(function() {
        $("#" + $(this).attr("id") + "-info")
            .slideToggle('normal')
            .siblings('div')
            .hide();

        $('.see').not($('.see', this)).html("View");

        if ($('.see', this).html() === "Hide")
            $('.see', this).html("View");
        else
            $('.see', this).html("Hide");
    })        
});

查看http://jsfiddle.net/7ZL5C/

Jquery切换面板＆amp;文字链接方法

1 个答案: