Question

我有一个Carousel嵌入Bootstrap模式。它可以通过clicking any of the logos on this page看到。出于某种原因，当我点击轮播导航按钮时，模态后面的页面向下滚动，按钮不起作用。知道可能导致这种情况的原因吗？

我正在使用CMS，所以对碎片表示道歉，但这是我的代码：

模态：

{assign var="uniqueID" value=$gallerydir}
{* gallerydir is a sneaky little bastard that like to change. uniqueID keeps it constant *}

<ul class="nav nav-tabs" id="{$uniqueID}">
  {foreach from=$images item=folderName name=nav}
    {if $smarty.foreach.nav.first}
    <li class="active"><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {else}
    <li><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {/if}
  {/foreach}
</ul>
<div class="tab-content">
 {foreach from=$images item=folder name=folderCount}
  {if $smarty.foreach.folderCount.first}
    <div id="{$folder->filename}" class="tab-pane fade in active">
  {else}
    <div id="{$folder->filename}" class="tab-pane fade">
  {/if}
      {Gallery dir="PortfolioGallery/`$uniqueID`/`$folder->filename`" template='CategoryViewer'}
    </div>

 {/foreach}
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#{$uniqueID} a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>

模态中的轮播：

{assign var="category" value=$gallerydir}
<div id="{$category}-carousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#{$category}-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#{$category}-carousel" data-slide-to="1"></li>
        <li data-target="#{$category}-carousel" data-slide-to="2"></li>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
     {foreach from=$images item=slide name=slideCount}
      {if $smarty.foreach.slideCount.first}
        <div class="item active">
      {else}
        <div class="item">
      {/if}
            <h2>Slide 2</h2>
            <img src="{$slide->file}" />
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
            </div>
        </div>
     {/foreach}
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#{$category}-carousel" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="carousel-control right" href="#{$category}-carousel" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</div>

编辑：此脚本在我的页面上......是否会导致问题？

<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
</script>

Answer 1

此问题中引用的脚本打破了我添加到项目中的Bootstrap Carousel。我发现你可以add multiple selectors on not，如下：

$(function() {
    $('a[href*="#"]:not([href="#"],[href="#my-bootstrap-carousel"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        $('html, body').animate({
        scrollTop: target.offset().top
        }, 500);
        return false;
        }
        }
    });
});

希望这可以节省20分钟的谷歌搜索：）

如何阻止我的Bootstrap模式按钮向下滚动页面？

1 个答案: