slidetoggle | 易学教程

jQuery slideToggle strange behaviour

阅读更多关于 jQuery slideToggle strange behaviour

问题 i really need help, i can't see something that is obvious, and usually then it is the best to ask for help. I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none. Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div. I

.slideToggle() on one DIV instead of all others with same class

阅读更多关于 .slideToggle() on one DIV instead of all others with same class

问题 I'm trying to create a menu with DIVs for Appetizers, Soups, etc. I use paragraph tabs as my toggler. All of my togglers have identical classes of "toggle". All of the DIV areas have the same class, "selection." How do I make it so when I click on a toggler, it just reveals the DIV class right above it. Sorry, my coding is messy. JQuery: $(document).ready(function(){ $('.toggle').click(function(){ $('.selection').slideToggle("slow"); });<br> }); CSS: .selection,.toggle { width: 700px; margin

show div and hide existing div if open with jQuery?

阅读更多关于 show div and hide existing div if open with jQuery?

问题 I have two divs which are hidden by default. The user then reveals the div on click. If a div is already open, and the user clicks to reveal the other div, I want the current div to hide, and show the new div. My current code is this.. HTML <div class="menu">MENU</div> <div class="search">SEARCH</div> <div class="menu-box">MENU BOX</div> <div class="search-box">SEARCH BOX</div> CSS .menu, .search { display:inline-block; cursor:pointer; } .menu, .search, .menu-box, .search-box { padding:20px;

JQuery - How to load external contents into one div, toggle div with sliding effect, and autoscroll down to see expanded div

阅读更多关于 JQuery - How to load external contents into one div, toggle div with sliding effect, and autoscroll down to see expanded div

问题 On my HTML page, I have: 4 images sitting in a row, and 1 div sitting immediately underneath - collapsed. Depending on which image the user clicks, I would like to load the corresponding external page content into that DIV (using ajaxpage.js?). When the content gets loaded into the DIV, the DIV should toggle open with a sliding action. (using jquery.togglr.js?) I also would like the browser to automatically scroll down to the expanded DIV, otherwise, the user might not see that extra content

Transition between multiple slideToggle divs

阅读更多关于 Transition between multiple slideToggle divs

问题 The basic functionality of my webpage is that I will have thumbnails, .thnail which will display a project, when clicked, a drop down panel, .dropdown , will slide down to show images (carousel plug in) of projects with respect to the thumbnail clicked.The functionality is almost there, but the transition between clicking the thumbnails is really abrupt. I want the panel to slideUp and then slideDown once ANOTHER thumbnail is selected. The catch is that I need the .dropdown and .thnail to be

Get display status element effected by .slideToggle()?

阅读更多关于 Get display status element effected by .slideToggle()?

问题 I've tried is(':visible') , is(':hidden') and css('display') but I can not get the display status of an element after it has been through .slideToggle() What am I missing? Here is the jsfiddle: http://jsfiddle.net/djlerman/jbNg3/1/ and the code: <!DOCTYPE html> <html lang="en"> <head> <title>Test Slide Toggle</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <style type="text/css"> .ui-icon { float:left; } <

jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work

阅读更多关于 jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work

问题 I've been googling for the past couple of hours for an answer and a lot of similar instances have shown up at stackoverflow, but none of the answers seemed to work for me. Just really trying to learn/use JQuery as a beginner/intermediate user so I'm hoping I've just made some simple error. Probably doesn't help that the page I'm working on relies on about 14 different z-index levels to get the effect I want. I'm trying to design a portfolio that looks a little like a file folder. Ideally, if

Toggle a footer by clicking a button situation

阅读更多关于 Toggle a footer by clicking a button situation

问题 I have been working on this for a week or so and I have a solution that works but not very well. I have a hidden footer with a tab like button above it. When this button is clicked my footer will then slide up and push that button up as well. My problem comes from me being unable to place my button inside of the footer. Since the footer is hidden until clicked the button would also be hidden. One method I tried was instead of hiding the footer I placed a negative bottom on it to hide it until

jQuery slideToggle() peculiar behaviour in Chrome/Safari

阅读更多关于 jQuery slideToggle() peculiar behaviour in Chrome/Safari

问题 I am having a problem in Chrome when I slideToggle() and element. EDIT: Example here, click Link A a few times and you'll see what I mean. The HTML is along the lines of: <div> <a>Link A</a> <a id="myLink">Link B</a> </div> With very simple CSS floating all the links to the left horizontally: a{ float: left; margin-right: 20px; height: 20px; width: 20px; } #myLink{ display: none; } The JavaScript simply toggles between showing myLink and hiding it on some event. $('#myLink').slideToggle();