1. 首頁
  2. 問答
  3. jQuery的幻燈片搞亂其他分區的

jQuery的幻燈片搞亂其他分區的

2014-11-01 54 views
0

我有一個在我已經atached的代碼片段jQuery的幻燈片搞亂其他分區的

現在會顯示您的問題，當我點擊wrapper3head砸下去包裝3信息時刻jQuery的幻燈片視線問題它推墊形狀的3倒

我的問題是，2個包裝，現在身在何處附近的墊，但它仍然推下來

我尋求幫助，以獲得3周墊的形狀留在我點擊包裝3頭髮

如果您運行的片斷，你會明白我的意思只需點擊選擇存儲樣式的div

$(document).ready(function(){ 
 
    $("#wrapper3head").click(function(){ 
 
    $("#wrapper3").slideToggle("fast"); 
 
    }); 
 
    }); 
 
\t 
 
\t $(document).ready(function(){ 
 
    $("#Informationhead").click(function(){ 
 
    $("#Information").slideToggle("fast"); 
 
    }); 
 
    });
.wrapper { 
 
    position: relative; 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
} 
 

 

 
.wrapper2{ 
 
    position: relative; 
 
    width: 652px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
} 
 

 
.wrapper3head{ 
 
    position: relative; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
    text-align:center; 
 
    float:right; 
 
    margin-right:1%; 
 
} 
 

 
.wrapper3{ 
 
    position: relative; 
 
    width: 185px; 
 
    margin: 0 auto; 
 
    display:none; 
 
    border: 5px groove #8E2B2B; 
 
    text-align:center; 
 
    float:right; 
 
    margin-right:1%; 
 
} 
 

 
.Informationhead{ 
 
    position: relative; 
 
    width: 652px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
    text-align:center; 
 
} 
 

 
.Information{ 
 
    position: relative; 
 
    width: 635px; 
 
    margin: 0 auto; 
 
    display:none; 
 
    border: 5px groove #8E2B2B; 
 
    text-align:center; 
 
} 
 

 
.back { 
 
    position: relative; 
 
    width: 648px; 
 
    height: 648px; 
 
    z-index: 0; 
 
    background-color: #000; 
 
    border:3.5px ridge white; 
 
    border-radius: 310px; 
 
} 
 

 
.pad { 
 
    width: 300px; 
 
    height: 300px; 
 
    float: left; 
 
    z-index: 1; 
 
    margin: 10px; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
 
    filter: alpha(opacity=60); 
 
    opacity: 0.6; 
 
} 
 

 
.shape1 { 
 
    border-top-left-radius: 300px; 
 
    background-color: green; 
 
    border:2.5px groove white; 
 
    
 
} 
 

 
.shape2 { 
 
    float: left; 
 
    border-top-right-radius: 300px; 
 
    background-color: red; 
 
    clear: right; 
 
    border:2.5px groove white; 
 
    position: relative; 
 
} 
 

 
.shape3 { 
 
    float: left; 
 
    border-bottom-left-radius: 300px; 
 
    background-color: yellow; 
 
    clear: left; 
 
    border:2.5px groove white; 
 
} 
 

 
.shape4 { 
 
    float: left; 
 
    border-bottom-right-radius: 300px; 
 
    background-color: blue; 
 
    border:2.5px groove white; 
 
} 
 

 
.Timer { 
 
    position: absolute; 
 
    top: 195px; 
 
    left: 195px; 
 
    width: 250px; 
 
    height: 250px; 
 
    background: #000; 
 
    border-radius: 125px; 
 
    border:2.5px solid White; 
 
    z-index: 10; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <br /> 
 
\t <center><img src="Media/GroupLogo1.png" alt="Logo" height="200" width="250"></center> 
 
\t <br /> 
 
\t 
 
\t <div class="Informationhead"id="Informationhead">Information</div> 
 
\t <div class="Information"id="Information"> 
 
\t <p>Hello</p> 
 
\t </div> 
 

 
\t <div class="wrapper"> 
 
\t <div class="wrapper3head"id="wrapper3head">Choose Your Memory Style</div> 
 
\t <br /> 
 
\t <br /> 
 
\t <div class="wrapper3"id="wrapper3"> 
 
\t <p>Do You Want Sound ?</p> 
 
\t <input type="checkbox" value="No" style="color: Black;" id="sound">Yes 
 
    <p>Do You want Flashes ?</p> 
 
    <input type="checkbox" value="No" style="color: Black;" id="flash">Yes 
 
    <p>Do You want Text ?</p> 
 
    <input type="checkbox" value="No" style="color: Black;" id="text">Yes 
 
\t </div> 
 
\t 
 
\t \t <div class="back"> 
 
\t \t \t <div class="pad shape1" data-pad="1"> 
 
\t \t \t \t <audio preload="auto" class="sound1"> 
 
\t \t \t \t \t <source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/> 
 
\t \t \t \t \t <source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/> 
 
\t \t \t \t </audio> 
 
\t \t \t </div> 
 
\t \t \t <div class="pad shape2" data-pad="2"> 
 
\t \t \t \t <audio preload="auto" class="sound2"> 
 
\t \t \t \t \t <source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg"/> 
 
\t \t \t \t \t <source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/> 
 
\t \t \t \t </audio> 
 
\t \t \t </div> 
 
\t \t  <div class="Timer"> 
 
\t \t \t <br /> 
 
\t \t \t <br /> 
 
\t \t \t <br /> 
 
\t \t \t <br /> 
 
\t \t \t <br /> 
 
      <center><p><b><i>Time starts when you click start</i></b></p></center> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="pad shape3" data-pad="3"> 
 
\t \t \t \t <audio preload="auto" class="sound3"> 
 
\t \t \t \t \t <source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/> 
 
\t \t \t \t \t <source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/> 
 
\t \t \t \t </audio> 
 
\t \t \t </div> 
 
\t \t \t <div class="pad shape4" data-pad="4"> 
 
\t \t \t \t <audio preload="auto" class="sound4"> 
 
\t \t \t \t \t <source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/> 
 
\t \t \t \t \t <source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/> 
 
\t \t \t \t </audio> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t </div>

來源

2014-11-01 Jamiex304

回答

1

這是因爲發生在下拉有relative位置。您需要給它一個absolute的位置，以便它在打開後不會影響頁面上的任何其他元素。添加此CSS的樣式表將解決這個問題：

.wrapper3 { 
    position: absolute; 
    right: 0px; 
}

這裏的工作演示：

$(document).ready(function() { 
 
    $("#wrapper3head").click(function() { 
 
    $("#wrapper3").slideToggle("fast"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#Informationhead").click(function() { 
 
    $("#Information").slideToggle("fast"); 
 
    }); 
 
});
.wrapper { 
 
    position: relative; 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
} 
 
.wrapper2 { 
 
    position: relative; 
 
    width: 652px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
} 
 
.wrapper3head { 
 
    position: relative; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
    text-align: center; 
 
    float: right; 
 
    margin-right: 1%; 
 
} 
 
.wrapper3 { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 185px; 
 
    margin: 0 auto; 
 
    display: none; 
 
    border: 5px groove #8E2B2B; 
 
    text-align: center; 
 
    float: right; 
 
    margin-right: 1%; 
 
} 
 
.Informationhead { 
 
    position: relative; 
 
    width: 652px; 
 
    margin: 0 auto; 
 
    border: 5px groove #8E2B2B; 
 
    border-radius: 15px; 
 
    text-align: center; 
 
} 
 
.Information { 
 
    position: relative; 
 
    width: 635px; 
 
    margin: 0 auto; 
 
    display: none; 
 
    border: 5px groove #8E2B2B; 
 
    text-align: center; 
 
} 
 
.back { 
 
    position: relative; 
 
    width: 648px; 
 
    height: 648px; 
 
    z-index: 0; 
 
    background-color: #000; 
 
    border: 3.5px ridge white; 
 
    border-radius: 310px; 
 
} 
 
.pad { 
 
    width: 300px; 
 
    height: 300px; 
 
    float: left; 
 
    z-index: 1; 
 
    margin: 10px; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
 
    filter: alpha(opacity=60); 
 
    opacity: 0.6; 
 
} 
 
.shape1 { 
 
    border-top-left-radius: 300px; 
 
    background-color: green; 
 
    border: 2.5px groove white; 
 
} 
 
.shape2 { 
 
    float: left; 
 
    border-top-right-radius: 300px; 
 
    background-color: red; 
 
    clear: right; 
 
    border: 2.5px groove white; 
 
    position: relative; 
 
} 
 
.shape3 { 
 
    float: left; 
 
    border-bottom-left-radius: 300px; 
 
    background-color: yellow; 
 
    clear: left; 
 
    border: 2.5px groove white; 
 
} 
 
.shape4 { 
 
    float: left; 
 
    border-bottom-right-radius: 300px; 
 
    background-color: blue; 
 
    border: 2.5px groove white; 
 
} 
 
.Timer { 
 
    position: absolute; 
 
    top: 195px; 
 
    left: 195px; 
 
    width: 250px; 
 
    height: 250px; 
 
    background: #000; 
 
    border-radius: 125px; 
 
    border: 2.5px solid White; 
 
    z-index: 10; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <br /> 
 
    <center> 
 
    <img src="Media/GroupLogo1.png" alt="Logo" height="200" width="250"> 
 
    </center> 
 
    <br /> 
 

 
    <div class="Informationhead" id="Informationhead">Information</div> 
 
    <div class="Information" id="Information"> 
 
    <p>Hello</p> 
 
    </div> 
 

 
    <div class="wrapper"> 
 
    <div class="wrapper3head" id="wrapper3head">Choose Your Memory Style</div> 
 
    <br /> 
 
    <br /> 
 
    <div class="wrapper3" id="wrapper3"> 
 
     <p>Do You Want Sound ?</p> 
 
     <input type="checkbox" value="No" style="color: Black;" id="sound">Yes 
 
     <p>Do You want Flashes ?</p> 
 
     <input type="checkbox" value="No" style="color: Black;" id="flash">Yes 
 
     <p>Do You want Text ?</p> 
 
     <input type="checkbox" value="No" style="color: Black;" id="text">Yes 
 
    </div> 
 

 
    <div class="back"> 
 
     <div class="pad shape1" data-pad="1"> 
 
     <audio preload="auto" class="sound1"> 
 
      <source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg" /> 
 
      <source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg" /> 
 
     </audio> 
 
     </div> 
 
     <div class="pad shape2" data-pad="2"> 
 
     <audio preload="auto" class="sound2"> 
 
      <source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg" /> 
 
      <source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg" /> 
 
     </audio> 
 
     </div> 
 
     <div class="Timer"> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <center> 
 
      <p><b><i>Time starts when you click start</i></b> 
 
      </p> 
 
     </center> 
 
     </div> 
 

 
     <div class="pad shape3" data-pad="3"> 
 
     <audio preload="auto" class="sound3"> 
 
      <source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg" /> 
 
      <source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg" /> 
 
     </audio> 
 
     </div> 
 
     <div class="pad shape4" data-pad="4"> 
 
     <audio preload="auto" class="sound4"> 
 
      <source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg" /> 
 
      <source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg" /> 
 
     </audio> 
 
     </div> 
 

 
    </div> 
 
    </div>

來源

2014-11-01 00:17:18

+0

非常感謝花花公子 – Jamiex304 2014-11-01 00:54:38

相關問題

 相關問題