होवर पर बूटस्ट्रैप संकुचित accordion

Question

मैं उस प्रोजेक्ट में ट्विटर के बूटस्ट्रैप 'संकुचित' प्लग-इन का उपयोग कर रहा हूं जिस पर मैं काम कर रहा हूं। मेरे पास एक साधारण accordion (सेटअप as per the documentation) है, लेकिन मैं से पर पर होवर ईवेंट पर डिफ़ॉल्ट कार्यक्षमता में संशोधन करना चाहता हूं।

क्या कोई इसे प्राप्त करने का सबसे अच्छा तरीका पुष्टि कर सकता है?

Answer 1

आप सीधे प्लगइन स्क्रिप्ट से ढहने योग्य डेटा-एपीआई की प्रतिलिपि बना सकते हैं और होवर कार्यक्षमता प्राप्त करने के लिए इसे चारों ओर ट्विक कर सकते हैं। फिर आप इसे अपनी खुद की script.js फ़ाइल में रख सकते हैं और उस क्लिक को लक्षित कर सकते हैं जिसे आप क्लिक के बजाय होवर पर खोलने के लिए संशोधित करना चाहते हैं। उदाहरण के लिए इस प्रयास करें:

जे एस

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

इस डेटा-api प्लगइन पर पाया ब्लॉक का एक सीधा कॉपी है, मैं सिर्फ collapse विकल्प mouseenter साथ click घटना है और यह भी, बदल बदल दिया इसके बजाय show पर।

डेमो: 'clickability' http://jsfiddle.net/um2q2/1/

Answer 2

मैं मंडराना कार्यक्षमता हासिल बनाए रखते हुए काफी आसानी से:

jQuery(".pointer").hover(
    function(){ 
     var thisdiv = jQuery(this).attr("data-target") 
     jQuery(thisdiv).collapse("show"); 
    }, 
    function(){ 
     var thisdiv = jQuery(this).attr("data-target") 
     jQuery(thisdiv).collapse("hide"); 
    } 
); 

मैं पहले से ही डेटा-विशेषताओं का उपयोग किया गया था, इसलिए मैं उन्हें रखा है, और उन्हें यहाँ ट्रिगर करने के लिए इस्तेमाल किया सही divs। "पॉइंटर" मेरे टॉगल लिंक पर एक वर्ग है, इसलिए आप जो कुछ भी चाहते हैं उसे अनुकूलित कर सकते हैं।

Answer 3

मैं पार्टी के लिए थोड़ा देर हो चुकी हूं, लेकिन भविष्य के googlers के लिए, मैं ऐसा करने का एक बहुत आसान तरीका आया।

यह कॉफी स्क्रिप्ट मुझे डर लग रहा है, लेकिन आप विचार प्राप्त करना चाहिए:

$(".your-hoverable-object-class").mouseenter (e) -> 
$this = $(this) 
link = $this.find("a") #(assumes you only have one link) 
target = link.attr('data-target') || e.preventDefault() || (href = link.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') #strip for ie7 
unless $(target).hasClass('in') 
    link.trigger('click') #Here's the money shot - just trigger the default functionality 

कोड के बाकी चर स्थापित कर रही है - आप इसे कैसे निर्धारित किया है तो आप इस आधार पर बदलाव करने की आवश्यकता हो सकती ऊपर - और आखिरी बिट जांचता है कि क्लिक फिर से ट्रिगर करने से पहले पैनल पहले से नहीं खुलता है। दोबारा - यह मेरे सेट अप के लिए काम करता है, लेकिन अगर आप के लिए काम नहीं करते हैं तो आप इसे हटा सकते हैं।

Answer 4

क्लिफ सील के उत्तर के आधार पर मैं को collapse('show') एनीमेशन समाप्त होने से पहले खोलने से रोकने के लिए क्यूइंग एनीमेशन का सुझाव देता हूं।

$('div.panel-collapse').on('shown.bs.collapse hidden.bs.collapse', function() { 
    $(this).dequeue('collapse'); 
}); 
$('div.panel-heading').hover(
    function() { 
    var collapse = $($(this).find('a').attr('href')); 
    collapse.queue('collapse', function() { 
     $(this).collapse('show'); 
    }); 
    if (!collapse.hasClass('collapsing')) { 
     collapse.dequeue('collapse'); 
    } 
    }, 
    function() { 
    var collapse = $($(this).find('a').attr('href')); 
    collapse.queue('collapse', function() { 
     $(this).collapse('hide'); 
    }); 
    if (!collapse.hasClass('collapsing')) { 
     collapse.dequeue('collapse'); 
    } 
    } 
} 

यह सूखी कोडिंग का उपयोग नहीं करता है, लेकिन जब एक नामित समारोह का उपयोग कर रहा hover घटनाओं onload का सामना करना पड़ा। शायद कोई इस पर सलाह दे सकता है?

Answer 5

1. निम्न स्क्रिप्ट

   $(".hoverExpand").hover(
       function() { 
        if (! $(this).hasClass('collapsing') && 
         $(this).hasClass('collapsed')) { 
          $(this).click(); 
        } 
       }, function() { 
        if (! $(this).hasClass('collapsing') || 
         ! $(this).hasClass('collapsed')) { 
          $(this).click(); 
        } 
       } 
   ); 
   

2. जोड़ें hoverExpand (या जो भी आप इसे कॉल करना चाहते हैं) तत्व के लिए।नीचे

   <a class="hoverExpand" data-toggle="collapse" data-parent="#accordion" 
       href="#collapseOne">A plane that flies below water</a> 
   

Answer 6

उदाहरण देखें यह Bootstrap3 के लिए काम करने के लिए डाल करने के लिए मैं कुछ परिवर्तन

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

      $('.panel-collapse').not(target).collapse("hide") 
      $(target).collapse(option); 
    }) 
}); 

Answer 7

यह है कि माउसओवर पर किया बनाने के लिए सबसे आसान तरीका है बनाया है। AngularJs में सादे जावास्क्रिप्ट का उपयोग करना।

स्क्रिप्ट

$scope.collapsePanel = function(variable) { 
    if(document.getElementById(variable).className=="collapse in") { 
     document.getElementById(variable).className="collapse"; 
     document.getElementById(variable).setAttribute("aria-expanded","false"); 
     } else { 
      document.getElementById(variable).className="collapse in"; 
      document.getElementById(variable).setAttribute("aria-expanded","true"); 
     } 
} 

एचटीएमएल कोड

<div ng-repeat="entity in entities"> 
<div class="panel-heading" ng-mouseover="collapsePanel(entity)"> 
    //Give your contents here 
</div> 
</div> 

नोट: यह माउसओवर के बजाय क्लिक पर काम करने के लिए एनजी क्लिक के साथ परिवर्तन एनजी-माउसओवर