html - Bootstrap 可折叠不降低视差-6ren

html - Bootstrap 可折叠不降低视差

转载作者：行者123 更新时间：2023-11-28 00:50:22

我有一个较早工作的网站，突然我的底部可折叠并没有降低视差，它确实插入了我的 <hr>向下和页脚，但不是视差窗口，如果有人能帮我解决这个问题，我会很高兴。

/*@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}*/

body {
	text-align: center;
	background-color: #222;
}

hr {
	border-color: #191919;
}

.inf {
  color: white;
}

#logo-pc {
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-tablet {
	padding-top: 130px;
	width: 800px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-smaller {
	padding-top: 130px;
	width: 600px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

#logo-phone {
	padding-top: 190px;
	width: 200px;
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 20px;
  text-align: center;
}

.panel {
    background-image: none;
    background-color: #393939;
    color: white;
}

button {
	width: 200px;
}

.included1 {
  font-size: 18pt;
  margin-top: 15px;
  margin-bottom: 0;
}

.included {
  font-size: 15pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
  margin: 0px;
}

.included2 {
  font-size: 15pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
  margin: 5px;
}

.logo-animation {
  animation-duration: 3s;
  animation-delay: 0.5s;
}

.maten {
  font-size: 12pt;
}

.ingredienser {
  font-size: 10pt;
  color: rgb(255,255,255); /* Fallback color */
  color: rgba(255,255,255, 0.5);
}

.overlay {
   background:transparent; 
   position:relative; 
   width:350px;
   height:440px; /* your iframe height */
   top:440px;  /* your iframe height */
   margin-top:-440px;  /* your iframe height */
}



/* Footer CSS */
footer {
    background: #333;
    color: #eee;
    font-size: 12px;
    padding: 20px;
}

@keyframes heartbeat{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

.heart{
  animation: heartbeat 1s infinite;
}
/* END Footer CSS; */

<!DOCTYPE html>
<html>
<head>

<!-- Bootstrap CDN v3.3.7 -->

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="js/parallax.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!-- //.Bootstrap -->
</head>
<body>

<div class="col-xs-12 col-sm-6 fadeIn wow">
				<div class="accordion" id="myAccordion4">
				    <div class="panel">
				        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
				        <div id="collapsible-13" class="collapse">
				        	<h1 class="included">(Korv Meny)</h1>
				        	<hr>
					       	<p class="maten">Smal<br></p>
						    <h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
						    <hr>
					       	<p class="maten">Tjock<br></p>
						    <h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
						    <hr>
					       	<p class="maten">Pommes<br></p>
						    <h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
						    <hr>
					       	<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
						    <h5 class="ingredienser">med potatismos & lingon</h5>
						    <hr>
					       	<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
						    <h5 class="ingredienser">med potatismos & lingon</h5>
						    <hr>
					       	<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
						    <h5 class="ingredienser">med potatismos & lingon</h5>
				        </div>
				    </div>
				    <div class="panel">
				        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
				        <div id="collapsible-14" class="collapse">
					        <h1 class="included1">I alla salladsmenyer ingår</h1>
				        	<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
				        	<hr>
				        	</h1>
					       	<p class="maten">Gyros<br></p>
						    <h5 class="ingredienser">gyros, lök, sås</h5>
						    <hr>
					       	<p class="maten">Kycklingsallad<br></p>
						    <h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
						    <hr>
					       	<p class="maten">Kebabsallad<br></p>
						    <h5 class="ingredienser">kebabkött, lök, sås</h5>
						    <hr>
					       	<p class="maten">Grekisk sallad<br></p>
						    <h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
						    <hr>
					       	<p class="maten">Tonfisksallad<br></p>
						    <h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
						    <hr>
					       	<p class="maten">Amerikansk sallad<br></p>
						    <h5 class="ingredienser">ost, skinka, ananas, sås</h5>
						    <hr>
					       	<p class="maten">Räksallad 80:-<br></p>
						    <h5 class="ingredienser">räkor, ost, paprika, citron</h5>
						    <hr>
				        </div>
				    </div>
				    <div class="panel">
				        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
				        <div id="collapsible-15" class="collapse">
					       	<p class="maten">Kyckling Pasta<br></p>
						    <h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
						    <hr>
					       	<p class="maten">Tonfisk Pasta<br></p>
						    <h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
						    <hr>
					       	<p class="maten">Gyros Pasta<br></p>
						    <h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
						    <hr>
					       	<p class="maten">Pasta Bolognese<br></p>
						    <h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
					 	</div>
				    </div>
				</div>
			</div><!-- //.col-xs-12 col-sm-6 -->
		</div><!-- //.row -->
	</div><!-- //.container -->

		<hr>
		<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>

	<footer>
		<div class="container">
			<div class="row">
				<div class="col-sm-2">
					<h6>©2018 Bence Papp. All rights reserved.</h6>
				</div><!-- //.col-sm-2 -->
				<div class="col-sm-3">
					<h5>Kontakta oss</h5>
					<p>Tel. nr<a href="tel:">tel.</a></p>
					<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
					<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
				</div><!-- //.col-sm-3 -->
				<div class="col-sm-2">
					<h5>Hoppa till</h5>
					<ul class="unstyled">
						<li><a href="#top">Start</a></li>
					</ul>
				</div><!-- //.col-sm-2 -->
				<div class="col-sm-2">
<!-- 					<h5>Sociala medier</h5>
					<ul>
						<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
					</ul> -->
				</div><!-- //.col-sm-2 -->
				<div class="col-md-3">
	                    <h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
	            </div><!-- //.col-sm-3 -->
			</div><!-- //.row -->
		</div><!-- //.container -->
	</footer>
  
  </body>
</html>

它确实将页脚向下推，并且 <hr>就像我说的，但不是视差窗口...

[编辑(添加js代码)]

/*!
 * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2016 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 */

;(function ( $, window, document, undefined ) {

  // Polyfill for requestAnimationFrame
  // via: https://gist.github.com/paulirish/1579671

  (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
  }());


  // Parallax Constructor

  function Parallax(element, options) {
    var self = this;

    if (typeof options == 'object') {
      delete options.refresh;
      delete options.render;
      $.extend(this, options);
    }

    this.$element = $(element);

    if (!this.imageSrc && this.$element.is('img')) {
      this.imageSrc = this.$element.attr('src');
    }

    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];

    if (positions.length < 1) {
      positions.push('center');
    }
    if (positions.length == 1) {
      positions.push(positions[0]);
    }

    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
      positions = [positions[1], positions[0]];
    }

    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();

    self.positionX = positions[0];
    self.positionY = positions[1];

    if (this.positionX != 'left' && this.positionX != 'right') {
      if (isNaN(parseInt(this.positionX))) {
        this.positionX = 'center';
      } else {
        this.positionX = parseInt(this.positionX);
      }
    }

    if (this.positionY != 'top' && this.positionY != 'bottom') {
      if (isNaN(parseInt(this.positionY))) {
        this.positionY = 'center';
      } else {
        this.positionY = parseInt(this.positionY);
      }
    }

    this.position =
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
      this.positionY + (isNaN(this.positionY)? '' : 'px');

    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    if (navigator.userAgent.match(/(Android)/)) {
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    this.$mirror = $('<div />').prependTo(this.mirrorContainer);

    var slider = this.$element.find('>.parallax-slider');
    var sliderExisted = false;

    if (slider.length == 0)
      this.$slider = $('<img />').prependTo(this.$mirror);
    else {
      this.$slider = slider.prependTo(this.$mirror)
      sliderExisted = true;
    }

    this.$mirror.addClass('parallax-mirror').css({
      visibility: 'hidden',
      zIndex: this.zIndex,
      position: 'fixed',
      top: 0,
      left: 0,
      overflow: 'hidden'
    });

    this.$slider.addClass('parallax-slider').one('load', function() {
      if (!self.naturalHeight || !self.naturalWidth) {
        self.naturalHeight = this.naturalHeight || this.height || 1;
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
      }
      self.aspectRatio = self.naturalWidth / self.naturalHeight;

      Parallax.isSetup || Parallax.setup();
      Parallax.sliders.push(self);
      Parallax.isFresh = false;
      Parallax.requestRender();
    });

    if (!sliderExisted)
      this.$slider[0].src = this.imageSrc;

    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
      this.$slider.trigger('load');
    }

  }


  // Parallax Instance Methods

  $.extend(Parallax.prototype, {
    speed:    0.2,
    bleed:    0,
    zIndex:   -100,
    iosFix:   true,
    androidFix: true,
    position: 'center',
    overScrollFix: false,
    mirrorContainer: 'body',

    refresh: function() {
      this.boxWidth        = this.$element.outerWidth();
      this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
      this.boxOffsetLeft   = this.$element.offset().left;
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;

      var winHeight = Parallax.winHeight;
      var docHeight = Parallax.docHeight;
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
      var margin;

      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
        this.imageHeight   = imageHeightMin;
        this.offsetBaseTop = imageOffsetMin;

        margin = this.imageWidth - this.boxWidth;

        if (this.positionX == 'left') {
          this.offsetLeft = 0;
        } else if (this.positionX == 'right') {
          this.offsetLeft = - margin;
        } else if (!isNaN(this.positionX)) {
          this.offsetLeft = Math.max(this.positionX, - margin);
        } else {
          this.offsetLeft = - margin / 2 | 0;
        }
      } else {
        this.imageWidth    = this.boxWidth;
        this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
        this.offsetLeft    = 0;

        margin = this.imageHeight - imageHeightMin;

        if (this.positionY == 'top') {
          this.offsetBaseTop = imageOffsetMin;
        } else if (this.positionY == 'bottom') {
          this.offsetBaseTop = imageOffsetMin - margin;
        } else if (!isNaN(this.positionY)) {
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
        } else {
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
        }
      }
    },

    render: function() {
      var scrollTop    = Parallax.scrollTop;
      var scrollLeft   = Parallax.scrollLeft;
      var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
      var scrollBottom = scrollTop + Parallax.winHeight;

      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
        this.visibility = 'visible';
        this.mirrorTop = this.boxOffsetTop  - scrollTop;
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
      } else {
        this.visibility = 'hidden';
      }

      this.$mirror.css({
        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
        visibility: this.visibility,
        height: this.boxHeight,
        width: this.boxWidth
      });

      this.$slider.css({
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
        position: 'absolute',
        height: this.imageHeight,
        width: this.imageWidth,
        maxWidth: 'none'
      });
    }
  });


  // Parallax Static Methods

  $.extend(Parallax, {
    scrollTop:    0,
    scrollLeft:   0,
    winHeight:    0,
    winWidth:     0,
    docHeight:    1 << 30,
    docWidth:     1 << 30,
    sliders:      [],
    isReady:      false,
    isFresh:      false,
    isBusy:       false,

    setup: function() {
      if (this.isReady) return;

      var self = this;

      var $doc = $(document), $win = $(window);

      var loadDimensions = function() {
        Parallax.winHeight = $win.height();
        Parallax.winWidth  = $win.width();
        Parallax.docHeight = $doc.height();
        Parallax.docWidth  = $doc.width();
      };

      var loadScrollPosition = function() {
        var winScrollTop  = $win.scrollTop();
        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
      };

      $win.on('resize.px.parallax load.px.parallax', function() {
          loadDimensions();
          self.refresh();
          Parallax.isFresh = false;
          Parallax.requestRender();
        })
        .on('scroll.px.parallax load.px.parallax', function() {
          loadScrollPosition();
          Parallax.requestRender();
        });

      loadDimensions();
      loadScrollPosition();

      this.isReady = true;

      var lastPosition = -1;

      function frameLoop() {
        if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
          window.requestAnimationFrame(frameLoop);
          return false;
        } else lastPosition = window.pageYOffset;

        self.render();
        window.requestAnimationFrame(frameLoop);
      }

      frameLoop();
    },

    configure: function(options) {
      if (typeof options == 'object') {
        delete options.refresh;
        delete options.render;
        $.extend(this.prototype, options);
      }
    },

    refresh: function() {
      $.each(this.sliders, function(){ this.refresh(); });
      this.isFresh = true;
    },

    render: function() {
      this.isFresh || this.refresh();
      $.each(this.sliders, function(){ this.render(); });
    },

    requestRender: function() {
      var self = this;
      self.render();
      self.isBusy = false;
    },
    destroy: function(el){
      var i,
          parallaxElement = $(el).data('px.parallax');
      parallaxElement.$mirror.remove();
      for(i=0; i < this.sliders.length; i+=1){
        if(this.sliders[i] == parallaxElement){
          this.sliders.splice(i, 1);
        }
      }
      $(el).data('px.parallax', false);
      if(this.sliders.length === 0){
        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
        this.isReady = false;
        Parallax.isSetup = false;
      }
    }
  });


  // Parallax Plugin Definition

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this);
      var options = typeof option == 'object' && option;

      if (this == window || this == document || $this.is('body')) {
        Parallax.configure(options);
      }
      else if (!$this.data('px.parallax')) {
        options = $.extend({}, $this.data(), options);
        $this.data('px.parallax', new Parallax(this, options));
      }
      else if (typeof option == 'object')
      {
        $.extend($this.data('px.parallax'), options);
      }
      if (typeof option == 'string') {
        if(option == 'destroy'){
            Parallax.destroy(this);
        }else{
          Parallax[option]();
        }
      }
    });
  }

  var old = $.fn.parallax;

  $.fn.parallax             = Plugin;
  $.fn.parallax.Constructor = Parallax;


  // Parallax No Conflict

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


  // Parallax Data-API

  $( function () { 
    $('[data-parallax="scroll"]').parallax(); 
  });

}(jQuery, window, document));

[编辑]我正在使用这个 parallax.js

提前致谢!

最佳答案

首先，您应该验证您的 HTML，</head>和 <body>标签丢失，有两个 </div>而且。 (第 96 行或类似的东西)

为了您的目的，我认为 parallax.js 是矫枉过正。你可以只使用 background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed; .

您的内容有 80vh 并且当它溢出时(面板会那样做)，然后它会搞砸您的页脚和其他内容。也许你可以使用 position: absolute; .

关于html - Bootstrap 可折叠不降低视差，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53250436/

文章推荐： html - 如何组合标题和导航栏

文章推荐： javascript - 使用 jquery 在 JSON 中搜索并显示结果

文章推荐： javascript - 如何清除和更改 Canvas 的背景颜色？

jQuery 可折叠
我正在尝试创建一个无序列表，其中每个包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
Java 可折叠 if 语句
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。原始代码如下所示: if ((getSomething() != null && getS
javascript - 可折叠/可展开的表格行为
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
javascript - 可折叠 Accordion
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
javascript - 可折叠，具有内容相关的展开大小
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？这是我
jQuery 可折叠 UL
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个一次。
Flutter 可折叠/可扩展卡片
我正在尝试匹配这个设计点击卡片应该展开我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
Javascript 可折叠 div 不起作用？
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
css - Materialise CSS - 可折叠
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。出于某种原因，当
php - 如何使递归 TreeView 可折叠
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。这是我的基本
java - Sonar 可折叠 if 语句
我收到异常“可折叠 if 语句”。通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
javascript - Angular 可折叠 Accordion
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
reactjs - Ant Design - 使菜单可折叠/可折叠
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
twitter-bootstrap - 可折叠 Bootstrap ，显示第一个元素
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
haskell - 可折叠、Monoid 和 Monad
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
Django admin - 如何使 "inlines"可折叠？
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案在 Django 1.10+ 中: class MyModelInl
javascript - YUI dataTable 行可展开/可折叠
有人已经用 YUI dataTable 制作了如下示例的脚本吗？示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
python - wxpython 可折叠 Pane 大小响应不一致
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
c# - Xamarin Forms 可折叠 StackLayout
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
android - 可折叠 View 不适用于 viewpager
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。我想在用户滚动布局时折叠顶部水平回收器 View

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 可折叠不降低视差