1

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

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

感谢您的任何建议。

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

1 回答 1

0

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

$(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/

于 2012-10-02T15:15:14.013 回答