javascript - 不使用 ID 向下滑动 moreinfo div-6ren

javascript - 不使用 ID 向下滑动 moreinfo div

转载作者：行者123 更新时间：2023-11-28 08:18:49

25

4

我正在尝试创建一个没有 ID 的盒子。我的意思是当我按下按钮(也没有 ID)时滑出的框，并且所有其他“更多信息”文本不应滑落。

这是我使用 ID 的示例。

$(document).ready(function(){
  $('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
    var anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $(anchor.attr('href')).offset().top
    }, 1000);
    e.preventDefault();
  });
  return false;
});

//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
  if($('#box1_more').css('display') == 'none') {
    $('#box1_more_btn').text("less");
    $('#box1_more').slideDown(400);
  } else {
    $('#box1_more_btn').text("more");
    $('#box1_more').slideUp(400);
  }
});

$('#box2_more_btn').click(function() {
  if($('#box2_more').css('display') == 'none') {
    $('#box2_more_btn').text("less");
    $('#box2_more').slideDown(400);
  } else {
    $('#box2_more_btn').text("more");
    $('#box2_more').slideUp(400);
  }
});

.moreinfo {
  display:none;
}

#box_1 {
  color: black;
  background-color: #F2F2F2;
}
#box1_more {
  background-color: rgba(0,0,0,0.008)
}

#box_2 {
  color: black;
  background-color: #F2F2F2;
}
#box2_more {
  background-color: rgba(0,0,0,0.008)
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="wrapper">
    <br /><br />

    <div id="box_1" class="box">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
            <p class="lead">
              First box   ...    <a href="#box_1"><span id="box1_more_btn">more</span></a> !
            </p>
          </div>
        </div>
      </div>

      <div class="container moreinfo" id="box1_more">
        <div class="row">
          <div class="col-md-12">
            <h3>More Info</h3>
            This is the first more Info box<br /><br />
          </div>
        </div>
      </div>
    </div> <!-- BOX-1 end-->

    <br /><br /><br /><br />

    <div id="box_2" class="box">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
            <p class="lead">
              Second box   ...    <a href="#box_2" id="box2_more_btn">more<!-- This Button should also rename--></a> !
            </p>
          </div>
        </div>
      </div>

      <div id="box2_more" class="container moreinfo">
        <div class="row">
          <div class="col-md-12">
            <h3>More Info</h3>
            This is the second more Info box<br /><br />
          </div>
        </div>
      </div>
    </div> <!-- BOX-2 end-->

  </div>

</body>

所以我想象它没有 ID。我试过了，但不知道怎么走

这是我不使用 ID 的尝试:

$(document).ready(function(){
    $('a[href*=#]').bind("click", function(e){
      var anchor = $(this);
      $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top
      }, 1000);
      e.preventDefault();
    });
    return false;
  });

  //Here I must define every content box. And my goal is, that i need only one function.
  $('.morebtn').click(function() {
    if($('.moreinfo').css('display') == 'none') {
      $('.morebtn').html('<a href="#"> less </a>  '); // Is it possible too, that the window scroll down to "this" div?
      $('.box_moreinfo').slideDown(400);
    } else {
      $('.morebtn').html('<a href="#"> more </a>  ');
      $('.box_moreinfo').slideUp(400);
    }
  });

.moreinfo {
       display:none;
}

.box {
  color: black;
  background-color: #F2F2F2;
}
.box_moreinfo {
  background-color: rgba(0,0,0,0.008)
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>

  <div id="wrapper">
    <br /><br />

    <div class="box">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
            <p class="lead">
              First box   ...    <span class="morebtn"><a href="#">more</a></span>  !
            </p>
          </div>
        </div>
      </div>

      <div class="container moreinfo box_moreinfo">
        <div class="row">
          <div class="col-md-12">
            <h3>More Info</h3>
            This is the first more Info box<br /><br />
          </div>
        </div>
      </div>
    </div> <!-- BOX-1 end-->

    <br /><br />Now, both boxes slideOut on click...<br /><br /><br />

    <div class="box">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
            <p class="lead">
              First box   ...    <span class="morebtn"><a href="#">more</a></span>  !
            </p>
          </div>
        </div>
      </div>

      <div class="container moreinfo box_moreinfo">
        <div class="row">
          <div class="col-md-12">
            <h3>More Info</h3>
            This is the first more Info box<br /><br />
          </div>
        </div>
      </div>
    </div><!-- BOX-2 end-->

  </div>

</body>

最佳答案

看看你的标记，你就让自己的生活变得很困难!

如果这是我正在做的事情，我会在 HTML 中使关系更加明确:

<section class="has-more-info">

    <h1>Header</h1>

    <p>
      Text here... 
    </p>

    <button class="show-more-info">Show more</button>
    <div class="more-info hidden">
        <h3>More Info</h3>
        <p>This is the first more Info box</p>
    </div>

</section>

然后你可以使用:

$('.has-more-info').each( function() {
    $(this).find('.show-more-info').click( function(e) {
        e.preventDefault();
        $(this).siblings('.more-info').slideToggle();
    });
});

您需要将 .hidden 类设置为 display:none;最初，或 onload 以免妨碍非 JS 用户。

我还没有测试过这个，但这个概念应该能让你继续。

关于javascript - 不使用 ID 向下滑动 moreinfo div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28861737/

25

4

0

文章推荐： c++ - 编译 SAX 打印示例 (xerces)

文章推荐： ios - SiriKit 扩展不工作

文章推荐： css - Android 股票浏览器上的移动 Web 应用程序运行缓慢

python - 为什么 id(id) 和 id(id(id)) 总是返回相同的值，而 id(id(id(id))) "loops"超过 3 个值？
出现在 python 2.7.8 中。 3.4.1 不会发生这种情况。示例: >>> id(id) 140117478913736 >>> id(id) 140117478913736 >>> id
javascript - ID、唯一 ID、客户端 ID、唯一客户端 ID、静态客户端 ID？
好吧，我对动态创建的控件的 ID 很困惑。 Public Class TestClass Inherits Panel Implements INamingContainer
java - Stackoverflow 和 Hibernate 使用 sql IN (id, id, id, id..id)
我收到下面的错误，说有堆栈溢出。发生这种情况是因为带有 IN (id, id, id...id) 的 SQL 语句有大量参数。有没有什么办法解决这一问题？这是在我使用 Eclipse 的本地环境中发生
python - 为什么 CPython 中 id({}) == id({}) 和 id([]) == id([]) ？
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
python - 为什么 CPython 中的 id({}) == id({}) 和 id([]) == id([])？
为什么 CPython(对其他 Python 实现一无所知)有以下行为？ tuple1 = () tuple2 = ()
.net - 属性 'ID' : ID or Id? 的正确命名约定是什么
非常简单的问题:当我有一个持久对象时，它通常有一个名为 ID 的属性(对于抽象类)。那么..命名约定是ID还是Id？例如。 public int ID { get; set; } 或 public
java - ID 必须存在于容器中或作为生成的列，缺少 id : id
知道为什么我会收到此错误，我已经尝试了所有命名约定(小写/大写) 我正在使用 Vaadin，这是我的代码片段: public class Usercontainer extends BeanI
python - 为什么 id({}) == id({}) 和 id([]) == id([]) 在 CPython 中？
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
sql - shift id's of table alike (id = id + 1) 其中 id 是主键
我需要改变表的所有主键 UPDATE TODO SET id = id + 1 但我做不到(Demo 来自 Ahmad Al-Mutawa 的回答)描述了原因。主键不能这样改。我也不能根据这是 sq
mysql - JOIN ids 以 0 作为父 id，查询具有不同父 id 的 id
我正在尝试列出与用户相关的讨论列表。想象一下，如果你愿意的话: posts -------------------------------------------------------------
php - Mysql group_concat(id) 作为左连接中的 ids 并使用 ids 选择 id 组中的所有列
我有一个表，其中包含一些具有自己的 ID 和共享 SKU key 的文章。我尝试使用左连接进行查询，并使用组结果获取从查询返回的所有 id。我的数据结构是这样的: id - name -
mysql - 为什么 `if(id=max(id), id, id+1)` 在 mysql 中没有按预期工作
在下表People中: id name 1 James 2 Yun 3 Ethan 如果我想找到最大 ID，我可以运行此查询 select max(id) id from People; 结果是
javascript - 如何通过单击子 ID 找到父 ID，然后通过 jquery 获取父 ID 来查找子 ID
我正在产品页面上创建评论模块，其中显示垃圾评论选项，并显示 onclick 显示和隐藏弹出窗口。现在它在单个评论中工作正常但是当评论是两个时它同时打开两个因为类是相同的。现在这就是为什么我想要获取父
c# - 如果实体没有 ID，是否可以让 NHibernate 自动生成 ID，或者如果实体已经有 ID，是否可以使用实体的 ID？
根据 REST 哲学，PUT操作应该(取自维基百科): PUT http://example.com/resources/142 Update the address member of the co
javascript - 如何以编程方式获取属性 ID、 View ID 和帐户 ID？
我想知道如何在使用 PHP 或 JavaScript 进行身份验证后从 Google Analytics 获取 Property Id、View Id 和 Account Id？因为我希望能够将它们存
javascript - 我想使用所选按钮的 id，但如何从中获取 id？ this.id 不起作用
我想使用所选按钮的 ID 进行删除。但我不知道如何从中获取/获取 id。我尝试了 this.id 但不起作用。这是我创建按钮的地方: var deleteEmployer= document.cre
php - 通过给定的 ID 获取所有相关的父 ID 和子 ID
我有一个具有以下结构的表“表” ID LinkedWith 12 13 13 12 14 13 15 14 16
sql - 您如何找到一条链的原始 ID、第一个 ID 和最后一个 ID？
请不要在未阅读问题的情况下将问题标记为重复。我确实发布了一个类似的问题，但 STACKOVERFLOW 社区成员要求我单独重新发布修改后的问题，因为考虑到一个小而微妙的修改，解决方案要复杂得多。假设
Java 类构造函数 this.id = id 或 this.setId(id)
在 Android Studio 中，我创建了一个 Person.java 类。我使用Generate 创建了getter 和setter 以及构造函数。这是我的 Person.java 类: pu
jquery - 显示#id - 当悬停另一个#id 时隐藏#id
如何在 jQuery 中制作这样的东西: //这是显示的主体 ID //当我悬停 #hover-id 时，我希望 #principal-id 消失并更改。但是当我将光标放在 #this-id 上时

首页

博学

6Ren·AI

商城

javascript - 不使用 ID 向下滑动 moreinfo div