javascript - बूटस्ट्रैप 3 यूआरएल से एस्ट्रियन विस्तार




hash twitter-bootstrap-3 (3)

बूटस्ट्रैप 3 का उपयोग करके, मैं एक निर्दिष्ट एॉर्डियन को विस्तारित करने के लिए उप-नेविगेशन एंकर लिंक (यानी, index.php # wnsh) का उपयोग करने की कोशिश कर रहा हूं और सामग्री को पृष्ठ पर एंकर कर रहा हूं। मैंने उदाहरणों की खोज करने की कोशिश की है, लेकिन बहुत कम किस्मत के साथ, संभावना है क्योंकि मेरे एस्ट्रोनियन संरचना दिए गए बीएस 3 उदाहरण से अलग है। यहां मेरा HTML है:

अद्यतन करें:

कोड के लिए कुछ अपडेट किए, लेकिन यह अभी भी हैश द्वारा निर्दिष्ट एॉर्डियनशन को नहीं खोल रहा है। कोई और विचार?

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

जे एस

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow');
}

अग्रिम में धन्यवाद। किसी भी सहायता की सराहना की जाएगी।


मुझे कुछ ही मिनट पहले एक ही समस्या का सामना करना पड़ा। समाधान सीधे आगे दिखता है - आपको एक यूआरएल को पार्स करने और मिलान करने योग्य एॉर्डियन in क्लास in जोड़ने की जरूरत है, इसका आईडी का उपयोग करना:

// Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}

बूटस्ट्रैप 3.1.1 में परीक्षण और काम करना


सिर्फ एक प्रतिक्रिया, इलिया आर के लिए उसका समाधान महान काम किया! एकमात्र बात यह थी कि, पैनल शीर्षक शैली अद्यतन नहीं कर रही थी (पैनल शीर्षक लिंक से हटाए जाने की आवश्यकता थी।), इसलिए मैंने इलिया आर के कोड को एक टेड को छू लिया। किसी ने शायद एक बेहतर / क्लीनर समाधान किया है, लेकिन यह एक शुरुआत है।

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match('#') ) {
                $('#'+url.split('#')[1]).addClass('in');
                var cPanelBody = $('#'+url.split('#')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass('collapsed');
            }
        });

बूटस्ट्रैप 3.3.5 में परीक्षण और काम करना

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});
</script>




accordion