slideUp() not working in a drop down menu

Javascript & Ajax
#1

Hello, I guess the topic adequately describes the problem. I’m just going to go right ahead and include the html, css and js of the elements concerned. Basically, I can’t get the slideUp() method to bring the #pic_options_div element into view, but show() and fadeIn() work just fine. What could be the problem?

html

				
				
<ul id = "pic_options_panel">

	<li  class = "comment_color pic_options">Picture Options

		<ul id = "pic_options_div">

			<li id = "pic_options_collapse"> collapse </li>

			<li align = "center">Make Main Picture</li>

			<li align = "center">Delete This Picture </li>

			<li id = "upload_pic_link" align = "center">Upload New Picture </li>

		</ul>

	</li>
	


	<li class = "comment_color pic_comments">Comments</li>


	<li class = "clear"> </li>
	

</ul>

css

#pic_options_panel{z-index:601;margin:auto;padding:0px;position:relative;top:-80px;width:98%;height:30px;border:none;overflow:none;}

.pic_comments{float:left;position:relative;top:0px;left:80px;width:135px;cursor:pointer;}

.pic_options{float:left;position:relative;top:0px;left:40px;width:135px;cursor:pointer}

.pic_options ul{display:none;z-index:650;margin:0px;padding:0px;position:relative;bottom:110px;min-height:0px;width:142px;border:1px solid #ccc}

js

$(document).ready(function() {

	$(".pic_options").click(function() {


		$(this).children().slideUp(700);

         });

});
#2

Well, Drayarms, First, this is JQuery, not Javascript. Bit of a difference there…

And, after looking at some various code sites, I found that they all seem to have the children names in the children list. So, try this version… (Don’t have time to test it tonight, but repost if it doesn’t work!)

JQuery:

$(document).ready(function() {
   $(".pic_options").click(function() {
      $(this).children('.pic_options_collapse').slideUp(700);
         });
});

I just stuck one child in… But, all of the samples I looked at used DIV’s not LI’s, so I am not sure about this!

Good luck, let us know…

#3

@Ernie, yea I know it is j Q. Still falls under the broader j S umbrella thought. divs and lists are all block level elements. So they behave the same. I use lists in cases like this because it is easier to distinguish between elements from their parents and descendants. You solution won’t work because .pic_options_collapse is part of the block of elements which is hidden by defualt and which needs to be slided up. Well some guy in some other forum advised me to use slideDown() instead, which works though it is not the effect I want. Thanks nevertheless for your contrubution.

#4

I pointed out the JQuery vs JScript more for others reading this.

It is interesting that slidedown works but slideup does not. Did you try to use the exact slidedown code, just changing the down to up or did you have to rewrite it more? I am just curious why one works and the other does not. Hmmm, sounds like a bug in JQ…

Looking into it a bit further, I found some comments from others that mentioned issues with Chrome.

And, a few more comments saying that they had troubles with li’s but, had success with div’s. Perhaps placing div’s around the li’s might work. Not sure if that would work, but, worth a try…

Also, in this link, the user got theirs working and their code is just a little different than yours. I did not test it, but, perhaps it might help:
http://stackoverflow.com/questions/4953243/jquery-click-slideup-not-working

On samples that work, it looks nice, so I may want to use this in the future.
Good luck and let us know if you solve it… (I will test this more later…)

Sponsor our Newsletter | Privacy Policy | Terms of Service