मेरा कोड यह है: https://jsfiddle.net/ucffyp3v/43/

जैसा कि कहा गया है, मैं इस div की ऊंचाई में केवल 50px दिखाना चाहता हूं और बाकी को एक बार और दिखाने के बाद दिखाना चाहता हूं।

ऐसा लगता है कि जेएस बाकी div को प्रदर्शित करने के लिए काम नहीं कर रहा है।

$("document").ready(function(){
$(".show-more").click(function(){
if($(".mydiv").css("height")!="50px"){
  $(".mydiv").slideDown();
}
else{
  $(".mydiv").slideUp();
}
}
}
1
Mike L 2 अप्रैल 2018, 05:43

5 जवाब

सबसे बढ़िया उत्तर

यह शायद आप ढूंढ रहे हैं: कार्यशील लिंक

$( "document" ).ready(function() {
  $(".show-more").click(function(){
    if($(".mydiv").css("height") === "50px"){
      $(".mydiv").css("height", 'auto');
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").css("height", '50px');
      $(".mydiv").slideUp();
    }
  });
});

लेकिन मेरा सुझाव है कि आप स्क्रॉल को सुचारू रूप से चलाने के लिए <h2>Hello</h2> को स्थानांतरित कर सकते हैं।

1
Tan Duong 2 अप्रैल 2018, 03:04

सिंटैक्स त्रुटि : कार्य उदाहरण

$("document").ready(function(){
  $(".show-more").click(function(){
    if($(".mydiv").css("height")!="50px"){
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").slideUp();
    }
  });
});

और मुझे लगता है कि आप onchange,slideToggle फ़ंक्शन ढूंढ रहे हैं।

0
Minar Mnr 2 अप्रैल 2018, 03:24

हो सकता है कि आप इस प्रश्न को यहां देखना चाहें: jQuery टॉगल टेक्स्ट?

आप जो हासिल करने की कोशिश कर रहे हैं, उसके कुछ अच्छे उदाहरण हैं, जैसे उपयोगकर्ता @firstandlastpost द्वारा यहां यह पहेली:

https://jsfiddle.net/b5u14L5o/

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            console.log(stateOne, stateTwo, $(this).text());
            $(this).text() !== stateTwo  && stateOne
            ? $(this).text(stateTwo)
            : $(this).text(stateOne);
        });  
    }
});

$('button').on('click', function() {
    $(this).toggleText('Show it!', 'Hide it!').next().toggle();
});

आपके उदाहरण के लिए, मैंने इसे अनुकूलित किया: https://jsfiddle.net/ucffyp3v/87/

0
Caio Lopes 2 अप्रैल 2018, 03:10

आप स्लाइड टॉगल फ़ंक्शन का उपयोग कर सकते हैं, यह कामकाजी नमूना देखें:

https://jsfiddle.net/g0jy9Lhm/

$(document).ready(function(){
  $(".show-more").click(function(){
    $(".mydiv").slideToggle("slow");
  });
});
0
Raj Kumar N 2 अप्रैल 2018, 03:04

आपके पास शुरुआत के लिए सिंटैक्स त्रुटि है। लगता है यह काम कर रहा है।

https://jsfiddle.net/3kor5bup/2/a

$("document").ready(function() {
  $(".show-more").click(function() {
    if ($(".mydiv").css("height") != "50px") {
      $(".mydiv").slideDown();
    } else {
      $(".mydiv").slideUp();
    }
  });
});
0
Sebin Benjamin 2 अप्रैल 2018, 02:50