logo标签列表

使<a>链接激活展开文本按钮

javascriptjqueryhtml
4

我有一个按钮，长这个样子：

<button class="button-global button-a" id="more" target="1">More Info</button>

它通过以下方式触发扩展文本：

$('.p2').hide();
$('#more').click(function (ev) {
  var t = ev.target
  $('#expanded' + $(this).attr('target')).toggle(50, function(){
    console.log(ev.target)
    $(t).html($(this).is(':visible')? 'Simplify' : 'More Info')
  });
  return false;
});

我希望翻译这个链接（仅限aboutus链接）：

<a class="pcnav navlinks" href="#aboutus-target">About Us</a>

要实现点击时触发扩展文本，但如果已经显示扩展文本，则不需要触发。我不希望像按钮一样在aboutus上更改文本。（对于新来的人来说，这会让帖子变得有些混乱）任何帮助都将是非常好的！
3个回答
2

基于Class的jQuery

多个<a>和<button>解决方案

每个<a>、<button>和<section class='content...'>都有：

  • 一个"共同静态类"：.x

  • 两个"共享状态类"：.on和.off

为了控制具有相同一组类的不同标签，CSS/jQuery选择器被声明为组合，从而为多个标签建立特定行为，同时共享一个类，使得可以轻松访问所有标签作为一组。有关详细信息，请查看Demo 2中CSS部分的注释。

演示✱

Demo 2

Details are commented in demo. 

$('.more').on('click', function() {

  // Get the #id of the closest article.p
  var page = $(this).closest('.p').attr('id');
  
  // Toggle .on/.off on all .x within article.p 
  $(`#${page} .x`).toggleClass('on off');
});

/* 
Exclude .link.on to ensure click event is only
triggered when .off class is assigned to .link
*/
$('.link').not('.on').on('click', function() {

  /*+ Expand .content located within the same .p
  
  var page = $(this).closest('.p').attr('id'); 
  $(`#${page} .x`).addClass('on').removeClass('off');
  
  //-*/
  //*- Expand .content located at this.href
  
  var jump = $(this).attr('href');
  $(`${jump} .x`).addClass('on').removeClass('off');
  
  //-*/
  
  // Scroll to this.href
  $('html, body').animate({
    scrollTop: $(jump).offset().top
  }, 550);
});
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  background: #fff;
  padding: 20px;
  font: 400 small-caps 16px/1.45 Arial;
}

main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

article {
  background: none;
  display: table;
  width: 100%;
}

nav,
section,
footer {
  background: #222;
  color: #fc3;
  padding: 20px;
  text-align: center;
  font-size: 1rem;
  margin: 0 auto;
  width: 300px;
}

nav {
  padding: 10px 20px;
  margin: 0em auto -0.5em;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

section p {
  text-align: left;
}

footer {
  padding: 15px 20px 10px;
  margin: -2.8em auto 2.25em;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.link,
footer b {
  font-size: 1.5rem;
  color: #fc3;
}

nav b {
  display: inline-block;
  font-size: 1.5rem;
  width: 1em;
}

button {
  background: #fc3;
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  width: 150px;
}

/*
The next four rulesets demonstrate how only two
classes can be shared between multiple tags and still
provide different behavior and purpose.
*/

.content.off {
  max-height: 0;
  font-size: 0;
  color: transparent;
  opacity: 0;
  transition: color 0.65s, max-height 0.95s, font-size 0.95s, opacity 2.5s;
}

.content.on {
  height: auto;
  max-height: 5000px;
  font-size: 1.1rem;
  color: #fc3;
  opacity: 1;
  transition: all 0.75s;
}

.more.off::before {
  content: 'More Info';
}

.more.on::before {
  content: 'Simplify';
}
<main id='doc'>

  <article id='p1' class='p'>

    <nav>
      <a class="link x off" href="#p2">Next</a>
    </nav>

    <section>
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>

      <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>

      <p>I am so happy, my dear friend, so absorbed in the exquisite...</p>
    </section>

    <footer>
      <b>1</b>
    </footer>

  </article>

  <article id='p2' class='p'>

    <nav>
      <a class="link x off" href="#p1">Prev</a>
      <b>|</b>
      <a class="link x off" href="#p3">Next</a>
    </nav>

    <section>
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

      <p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>

      <p>The bedding was hardly...</p>
    </section>
    <footer>
      <b>2</b>
    </footer>
  </article>

  <article id='p3' class='p'>
    <nav>
      <a class="link x off" href="#p2">Prev</a>
    </nav>

    <section>
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog.</p>

      <p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>

      <p>Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
    </section>
    <footer>
      <b>3</b>
    </footer>
  </article>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

单个 <a> 和 <button> 解决方案

三元条件

以下演示将点击事件分别分配给按钮和链接。三元条件的结构如下：

variable = condition ? TRUE : FALSE;

此外，.class (.more) 被用作 #id (#more) 的更好的替代方案，但这并不是必需的。

演示 1

$('.content').hide();

$('.more').on('click', function() {
  var txt = $(this).text() === 'Simplify' ? 'More Info' : 'Simplify';
  $(this).text(txt);
  $('.content').toggle();
});

$('.navLink').on('click', function() {
  $('.content').show();
  $('.more').text('Simplify');
});
<button class="more">More Info</button><br>

<a class="navLink" href="#about">About Us</a>

<p class='content'>
  Content.
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

✱这是一个基于Ryan Wheale精美的样式Fiddle的分支。

我只是想让“关于我们”导航链接激活脚本的扩展部分，如果已经展开，则保持展开状态。为了使内容更简单，我省略了很多内容，但可能应该解释得更清楚。 - JTR
1
@JTR 我想我理解你的目标了。请查看更新后的答案。 - zer00ne
1
你是个天才。 - JTR
刚刚看了第二个演示，感到非常惊喜，可以将其用作移动设备的解决方案，甚至可以用作可折叠的内容选项卡来绕开汉堡导航。我使用这个问题是为了首页总结，并且在下面有更多的信息，基本上是“关于我们”，因此我将“关于我们”链接到该锚点。感谢两个演示！ - JTR
非常欢迎！顺便说一句，如果您需要一个快速简单的下拉菜单，请考虑使用<details>标签和<summary>标签。此外，我刚刚发布了另一个答案，其中演示使用了自定义的<details>。 - zer00ne
显示剩余2条评论
1
你需要触发 #more 按钮的 click 事件。可以像这样实现：
$('a[href="#aboutus-target"]').click((ev) => {
  ev.preventDefault();
  $('#more').trigger('click');
});

如果您只希望导航项展开文本而不折叠文本，您需要像这样做：
$('a[href="#aboutus-target"]').click((ev) => {
  ev.preventDefault();
  const $more = $('#more');
  const $targ = $('#expanded' + $more.attr('target'));

  // only if the target is not visible
  if( !$targ.is(':visible') ) {
    $more.trigger('click');
  }
});

这是一个显示它正常工作的 fiddle 示例：

https://jsfiddle.net/tvbhfom8/

这段代码可以激活按钮，但它会阻止 href="#aboutus-target" 链接的工作。 - JTR
1
然后删除ev.preventDefault()部分。 - Ryan Wheale
@JTR，你也可以在函数末尾添加return true;。 - Twisty
我已经添加了它，但如果有人已经打开了“更多”按钮，它会关闭文本，有没有一种方法可以这样表达，“aboutus”点击检查是否已经展开并且如果它已经可见，则不激活，如果它不可见则激活展开？ - JTR
抱歉 - 我更新了示例，现在应该可以正常工作了。这里还有一个 JSFiddle：https://jsfiddle.net/tvbhfom8/ - Ryan Wheale
显示剩余2条评论
0

我知道有点晚了，但我认为这可能会对这里有所帮助。

没有JavaScript的解决方案：使用<details>标签：

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring...</p>
</details>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接