jquery ドロップダウン・メニュー

質問

jquery ドロップダウン・メニュー

ドロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、
思うように表示が出来ません。
どうしたらいいのか、教えてください。

<script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('li.twitter').click(function() {
if ($(this).hasClass('click')) {
$(this).removeClass('click');
}
else {
$('.click').removeClass('click');
$(this).addClass('click');
}
});
$('div.drop').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); });
});
</script>

<div id="feed">
<ul class="aux">
<li class="rss1">
<a href="http">RSS1</a>
</li>
<li class="rss2">
<a href="http">RSS2</a>
</li>
<li class="rss3">
<a href="http">RSS3</a>
</li>

<li class="twitter">
<a href="#"><span>Twitter</span></a>
<div class="drop">
<p><strong>TW1</strong>
<a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a>
</p>
<p>
<strong>TW2</strong>
<a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a>
</p>
</div>
</li>
</ul>
</div>

回答No.1

steel_gray · ベストアンサー

クリックやマウスオーバーでのclassの変更は正常に動作しているようですよ。
どういう問題が起きてるかがわからないですけど、
.clickや.hoverでのスタイルを見直してみては？

お礼

回答　有り難うございます。
CSS周りを点検してみたのですが、動作はするのですが、クリックして開いた「ドロップダウン・メニュー」の大きさの変更と位置の移動ができなかったので最初からやり直しました。（説明不足のため誤解をまねきすみませんでした。）
ちなみに、作りかけつくりかけですが変更したコードです。
<div class="feed">
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
$(this).find("ul").each(function() {
rowWidth += $(this).width(); }); };
})(jQuery); if ( $(this).find(".row").length > 0 ) {
var biggestRow = 0;
$(this).find(".row").each(function() {$(this).calcSubWidth();
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else {
$(this).calcSubWidth();
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2,
interval: 100,
over: megaHoverOver,
timeout: 500,
out: megaHoverOut
};
$("ul#aux li .sub").css({'opacity':'0'});
$("ul#aux li").hoverIntent(config);
});
</script>
<ul id="aux">
<li>
<a href="#" class="rss1">Feed</a>
</li>
<li>
<a href="#" class="rss2">Comments</a>
</li>
<li>
<a href="#" class="rss3">E-mail</a>
</li>
<li>
<a href="#" class="twitter">Twitter</a>
<div class="sub">
<div class="row">
<ul style="width: 100px;">
<li><h2><a href="#">Follow ME</a></h2></li>
<li><a href="#">TW1</a></li>
<li><a href="#">TW2</a></li>
</ul>