2014-03-13 35 views
0

我正在使用Bootstrap製作手風琴面板,當我在面板中放置鏈接以轉到其他頁面時,它不起作用。 ¿我能做些什麼來使這個鏈接工作?非常感謝你!手風琴內的鏈接不起作用

這裏是我的HTML

<div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" class="panel-toggle" data-parent="#accordion" href="#collapseOne">TITTLE SECTION</a> </h4> 
       </div> 

       <div id="collapseOne" class="panel-collapse collapse"> 
       <div class="panel-body"> Text inside accordion. 
       <a href="http://www.blabla.com">THIS LINK DOESN'T WORK</a> 
       </div> 
      </div> 

在這裏,它的引導JS(對不起它太大)

/* ======================================================================== 
* Bootstrap: collapse.js v3.1.1 
* http://getbootstrap.com/javascript/#collapse 
* ======================================================================== 
* Copyright 2011-2014 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
* ======================================================================== */ 


+function ($) { 

    'use strict'; 

    // COLLAPSE PUBLIC CLASS DEFINITION 
    // ================================ 

    var Collapse = function (element, options) { 

    this.$element  = $(element) 
    this.options  = $.extend({}, Collapse.DEFAULTS, options) 
    this.transitioning = null 

    if (this.options.parent) this.$parent = $(this.options.parent) 
    if (this.options.toggle) this.toggle() 
    } 

    Collapse.DEFAULTS = { 
    toggle: true 
    } 

    Collapse.prototype.dimension = function() { 
    var hasWidth = this.$element.hasClass('width') 
    return hasWidth ? 'width' : 'height' 
    } 

    Collapse.prototype.show = function() { 
    if (this.transitioning || this.$element.hasClass('in')) return 

    var startEvent = $.Event('show.bs.collapse') 
    this.$element.trigger(startEvent) 
    if (startEvent.isDefaultPrevented()) return 

    var actives = this.$parent && this.$parent.find('> .panel > .in') 

    if (actives && actives.length) { 
     var hasData = actives.data('bs.collapse') 
     if (hasData && hasData.transitioning) return 
     actives.collapse('hide') 
     hasData || actives.data('bs.collapse', null) 
    } 

    var dimension = this.dimension() 

    this.$element 
     .removeClass('collapse') 
     .addClass('collapsing') 
     [dimension](0) 

    this.transitioning = 1 

    var complete = function() { 
     this.$element 
     .removeClass('collapsing') 
     .addClass('collapse in') 
     [dimension]('auto') 
     this.transitioning = 0 
     this.$element.trigger('shown.bs.collapse') 
    } 

    if (!$.support.transition) return complete.call(this) 

    var scrollSize = $.camelCase(['scroll', dimension].join('-')) 

    this.$element 
     .one($.support.transition.end, $.proxy(complete, this)) 
     .emulateTransitionEnd(350) 
     [dimension](this.$element[0][scrollSize]) 
    } 

    Collapse.prototype.hide = function() { 
    if (this.transitioning || !this.$element.hasClass('in')) return 

    var startEvent = $.Event('hide.bs.collapse') 
    this.$element.trigger(startEvent) 
    if (startEvent.isDefaultPrevented()) return 

    var dimension = this.dimension() 

    this.$element 
     [dimension](this.$element[dimension]()) 
     [0].offsetHeight 

    this.$element 
     .addClass('collapsing') 
     .removeClass('collapse') 
     .removeClass('in') 

    this.transitioning = 1 

    var complete = function() { 
     this.transitioning = 0 
     this.$element 
     .trigger('hidden.bs.collapse') 
     .removeClass('collapsing') 
     .addClass('collapse') 
    } 

    if (!$.support.transition) return complete.call(this) 

    this.$element 
     [dimension](0) 
     .one($.support.transition.end, $.proxy(complete, this)) 
     .emulateTransitionEnd(350) 
    } 

    Collapse.prototype.toggle = function() { 
    this[this.$element.hasClass('in') ? 'hide' : 'show']() 
    } 


    // COLLAPSE PLUGIN DEFINITION 
    // ========================== 

    var old = $.fn.collapse 

    $.fn.collapse = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     var data = $this.data('bs.collapse') 
     var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option) 

     if (!data && options.toggle && option == 'show') option = !option 
     if (!data) $this.data('bs.collapse', (data = new Collapse(this, options))) 
     if (typeof option == 'string') data[option]() 
    }) 
    } 

    $.fn.collapse.Constructor = Collapse 


    // COLLAPSE NO CONFLICT 
    // ==================== 

    $.fn.collapse.noConflict = function() { 
    $.fn.collapse = old 
    return this 
    } 


    // COLLAPSE DATA-API 
    // ================= 

    $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) { 
    var $this = $(this), href 
    var target = $this.attr('data-target') 
     || e.preventDefault() 
     || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 
    var $target = $(target) 
    var data = $target.data('bs.collapse') 
    var option = data ? 'toggle' : $this.data() 
    var parent = $this.attr('data-parent') 
    var $parent = parent && $(parent) 

    if (!data || !data.transitioning) { 
     if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed') 
     $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed') 
    } 

    $target.collapse(option) 
    }) 

}(jQuery); 

謝謝你對我的幫助!

+0

我不知道我是從http://getbootstrap.com/只要下載JS和手風琴作品完美無缺,只是手風琴內的鏈接不起作用。 – user3392397

+0

@MathewMacLean謝謝你!我會複製你的代碼來觀察我做得很糟糕!再次感謝你!! – user3392397

+0

無需發佈整個bootstrap.js代碼! –

回答

0

確保你正確鏈接您的外部文件:

<head> 
    <title>Accordian</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script type="text/javascript" src="//code.jquery.com/jquery.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
</head> 
+0

謝謝馬修!我發現了這個問題。我鏈接兩次相同的文件!林noob! :( 再次感謝你!! – user3392397

0

包含的所有文件,並使用此

<div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">TITTLE SECTION</a> </h4> 
       </div> 

       <div id="collapseOne" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
     <p>Text inside accordion.</p> 
       <a href="http://www.blabla.com">THIS LINK DOESN'T WORK</a> 
       </div> 
      </div> 
    </div> 
    </div>