JQuery Div и селектор класса

Question

Вот jsFiddle 1 , а вот мой код и PHP:

<div id="" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/">Αρχική</a>

</div><div class="menu_more" id="">

</div>

<div id="events" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/events">Εκδηλώσεις-Νέα</a>

</div><div class="menu_more" id="events">

<div id="educational_events" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/educational_events">Εκπαιδευτικές Εκδηλώσεις</a>

</div><div class="submenu_more" id="educational_events">

</div>

<div id="announcements" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/announcements">Ανακοινώσεις</a>

</div><div class="submenu_more" id="announcements">

</div>

<div id="party" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/party">Party-Χοροί</a>

</div><div class="submenu_more" id="party">

</div>

<div id="various" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/various">Λοιπές δραστηριότητες</a>

</div><div class="submenu_more" id="various">

</div></div>

<div id="proposals" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/proposals">Προτάσεις</a>

</div><div class="menu_more" id="proposals">

<div id="dap_hmmy" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_hmmy">Προτάσεις ΔΑΠ-ΝΔΦΚ ΗΜΜΥ</a>

</div><div class="submenu_more" id="dap_hmmy">

</div>

<div id="dap_emp" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_emp">Προτάσεις ΔΑΠ-ΝΔΦΚ ΕΜΠ</a>

</div><div class="submenu_more" id="dap_emp">

</div>

<div id="dap_aei" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_aei">Προτάσεις ΔΑΠ-ΝΔΦΚ ΑΕΙ</a>

</div><div class="submenu_more" id="dap_aei">

</div></div>

<div id="lessons" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/lessons">Μαθήματα</a>

</div><div class="menu_more" id="lessons">

<div id="1_semester" class="submenu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/lessons/1_semester/">1<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="1_semester">

<a href="/lessons/1_semester/games.html">O titlos tou arthrou</a></div>

<div id="2_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/2_semester">2<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="2_semester">

</div>
 <div id="3_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/3_semester">3<sup>o</sup> εξάμηνο</a>
</div><div class="submenu_more" id="3_semester"> 
</div>
<div id="4_semester" class="submenu">
<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/4_semester">4<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="4_semester">

</div>

<div id="5_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/5_semester">5<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="5_semester">

</div>

<div id="courses_flows" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/courses_flows">Μαθήματα ροών</a>

</div><div class="submenu_more" id="courses_flows">
    </div></div>
  </div><div style="float:right;width:325px;overflow:hidden;"><div id="notes" class="menu">
    <img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/notes">Σημειώσεις-Παλιά Θέματα</a>
    </div><div class="menu_more" id="notes">
    <div id="1_semester" class="submenu">
    <img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/1_semester">1<sup>o</sup> εξάμηνο</a>
    </div><div class="submenu_more" id="1_semester">
    </div>
    <div id="2_semester" class="submenu">
    <img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/2_semester">2<sup>o</sup> εξάμηνο</a>
    </div><div class="submenu_more" id="2_semester">
    </div>

<div id="3_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/3_semester">3<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="3_semester">

</div>

<div id="4_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/4_semester">4<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="4_semester">

</div>

<div id="5_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/5_semester">5<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="5_semester">

</div>

<div id="courses_flows" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/courses_flows">Μαθήματα ροών</a>

</div><div class="submenu_more" id="courses_flows">

</div></div>

<div id="radio" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/radio">Radio</a>

</div><div class="menu_more" id="radio">

</div>

<div id="contact" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/contact">Επικοινωνία</a>

</div><div class="menu_more" id="contact">

</div>

<div id="services" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/services">Υπηρεσίες</a>

</div><div class="menu_more" id="services">

<div id="terms_of_use" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/terms_of_use">Όροι χρήσης</a>

</div><div class="submenu_more" id="terms_of_use">

</div>

<div id="privacy" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/privacy">Προσωπικό απόρρητο</a>

</div><div class="submenu_more" id="privacy">

</div>

<div id="statistics" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/statistics">Στατιστικά Ιστοτόπου</a>

</div><div class="submenu_more" id="statistics">

</div>

<div id="sitemap" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/sitemap">Xml Sitemap</a>

</div><div class="submenu_more" id="sitemap">

</div>

</div>

</div><br>      

Это будет что-то вроде карты сайта.Проблема в том, что я не могу поймать класс .submenu_more, который имеет определенный id.

код jQuery:

$(document).ready(function(){
    $(".menu img, .submenu img").click(function(){
        if($(this).attr("class")=="inactive")
            return false;
        var id_clicked=$(this).parent().attr("id");
        var class_clicked=$(this).parent().attr("class");
        visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");
        //alert($("."+class_clicked+"_more"+"#1_semester").length);
        if(visib_clicked=="visible"){
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("visibility","hidden");
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("position","absolute");
            $(this).attr("src","http://dap.ntua.gr/el/img/plus.png");
        }else{
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("visibility","visible");
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("position","relative");
            $(this).attr("src","http://dap.ntua.gr/el/img/minus.png");
        }
    });
});

Попробуйте нажать 1о в jsfiddle, чтобы увидеть проблему,Не нажимайте на текст.Нажмите на изображение справа от текста.

visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");

Работает нормально, если я нажимаю .menu img class, но не работает для .submenu img class ...

Пример:

<div id="some_id_1" class="menu">
<img src="some_src.png"/>
<a href="something">Some text</a>
<div id="same_id with_parent=some_id_1" class="menu_more">
blabla_goes here
</div>

Я хочу, когда я нажимаю на изображение .menu_more с id = some_id_1 div disapearead .. Нечто подобное и для подменю и подменю_more .. Для меню menu_more мой код работает, Не работает для подменю, submenu_more..

Я нашел проблему .. Проблема в имени id

id="1_semester" doesn't work

id="semester" работает !!Это почему?Я не хочу менять идентификаторы своих элементов, если это не нужно

Answer 1

Я не совсем понимаю, что вы пытаетесь сделать там.

var id_clicked=$(this).parent().attr("id");
var class_clicked=$(this).parent().attr("class");
visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");

, если id_clicked - это идентификатор родителя, а class_clicked - это класс родителя, а не $ (". "+ class_clicked +" _ more # "+ id_clicked) просто ... родитель !?вы также можете иметь только один идентификатор в документе

, а вместо

visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");
    if(visib_clicked=="visible"){
     ....

вы можете иметь

$( something:visible ).css({
    position : ...
  , visibility ...
})

$( something:hidden ).css({
    position : ...
  , visibility ...
})