Question

有没有办法让按钮不仅可以切换隐藏的手风琴，还可以让页面滚动到该部分？这是我到目前为止的代码。我的导航工作很棒，想知道我错过了什么，让按钮显示文本并滚动到它的顶部。

谢谢。

这是Codepen，其中包含我正在使用的所有内容。我想知道我是否能得到一些帮助？

我的HTML标记

<nav class="navbar navbar-fixed-top" data-spy="scroll">
  <div class="container-fluid">
      <div class="row">
      <div class="navbar-header">
        <a class="navbar-brand col-lg-12 col-md-12 col-sm-12 col-xs-6" href="#top"><img src="/img/logo.png" class="img-responsive" alt="Rhino Group Logo"></a>
        <div class="col-xs-1 col-xs-offset-1 visible-xs phoneIcon text-center"><a href="#"><i class="fa fa-phone"></i></a></div>
        <button type="button" data-toggle="collapse" data-target="#navigation-bar" class="navbar-toggle collapsed col-xs-2">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse top-pull-right" id="navigation-bar">
        <ul class="nav navbar-nav">
          <li class="caps"><a href="#Services">services</a></li>
          <li class="caps"><a href="#Portfolio">portfolio</a></li>
          <li class="caps"><a href="#Contact">contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="about-background">
<section class="about"> <!-- begin about -->
  <div class="container-fluid">
    <div class="row" data-spy="scroll">
      <h1 class="slogan text-center">The <span class="red">POWER</span> of the <span class="blue">WEB</span></h1>
      <p class="text-center col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1  ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <button class="read-more text-center col-md-4 col-md-offset-4 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" type="button" data-toggle="collapse" data-target="#aboutUs">
        <h4 class="caps">continue reading</h4>
      </button>
        <div class="collapse panel-body col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12" id="aboutUs">
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ante vulputate, tincidunt est nec, porttitor lorem. Praesent id nisi leo. Nunc imperdiet lacus quis condimentum tempus. Vestibulum mollis, magna at fermentum consequat, turpis elit suscipit libero, ac tincidunt purus nibh vitae massa. Aenean eleifend ipsum aliquam est euismod, non convallis ante mollis. Sed maximus dui sit amet dui vestibulum mattis. 
          </p> 
        </div>
    </div>
  </div>
</section> <!-- end about -->

Answer 1

我的问题的答案就在这里。我没有正确地调用href，它与数据目标冲突。通过删除数据目标并在我自己的崩溃手风琴中写作，第二个例子，我能够解决这个问题。

使用我的初始示例运行此行：

jQuery的：

function scrollNav() {
  $('.navbar a').click(function(){  
     //Toggle Class
     $(".active").removeClass("active");      
     $(this).closest('li').addClass("active");
     var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top - 61
      }, 1000);
        return false;
    });
    $('.scrollTop a').scrollTop();
    }


function scrollReadMoreBtn() {
  $(' #readMoreBtn').on('click', function(){  
     $('#aboutUs').slideDown('slow/400/fast');
    //Animate
    $('html, body').animate({
    scrollTop: $( '#aboutUs' ).offset().top - 61
      }, 1000);
        return false;
    });
    $('.scrollTop a').scrollTop();
    }

使用此HTML

<div class="about-background">
    <section class="about"> <!-- begin about -->
      <div class="container-fluid">
        <div class="row">
          <h1 class="slogan text-center">The <span class="red">POWER</span> of the <span class="blue">WEB</span></h1>
          <p class="text-center col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1  ">Lorem Ipsum</p>

          <button href="#readMore" class="read-more text-center col-md-4 col-md-offset-4 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" id="readMoreBtn" type="button" data-toggle="collapse" >
            <h4 class="caps">continue reading</h4>
          </button>
            <div class="collapse panel-body col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12" id="aboutUs" name="readMore">
              <p class="text-justify">Lorem Ipsum content </p>
            </div>
          </div>
        </div>
      </section>
    </div>

在按钮上使用Bootstrap数据间谍和数据切换

1 个答案: