переключатель с JQuery 1.8.3

Создать тумблер с JQuery 1.8.3, как этотпереключатель с JQuery 1.8.3

$(document).ready(function() { 
 
     $('#showmenu1').click(function() { 
 
       $('.menu1').slideToggle("fast"); 
 
     }); 
 
    
 
    $('#showmenu2').click(function() { 
 
       $('.menu2').slideToggle("fast"); 
 
     }); 
 
    
 
    $('#showmenu3').click(function() { 
 
       $('.menu3').slideToggle("fast"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="showmenu1">Click Here</div> 
 
<div class="menu1" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu2">Click Here</div> 
 
<div class="menu2" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu3">Click Here</div> 
 
<div class="menu3" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div>

Как я могу уменьшить выше JQuery кода?

источник

2016-03-17 noushid p

Лучший вопрос, почему вы хотите? Хотя включенные ответы будут работать, если вы когда-либо измените структуру своего дома, вы нарушили код. Сохраняя его, как у вас, он делает его более безопасным и читаемым. – Ageonix

Потому что это действительно вопрос обзора кода, это не обязательно по теме для SO, и есть хороший шанс, что он будет закрыт. Было бы более уместно спросить об этом на [Кодекс обзора стека Exchange] (http://codereview.stackexchange.com/). – twernt

@twernt, пожалуйста, не утруждайте себя миграцией. Это уже ответили, и ничто из этого на этой странице не подходит для [codereview.se]. Вопрос, как минимум, потребует лучшего описания. И меньше пример-иш. –

Используйте общий класс и использовать следующий()

$(document).ready(function() { 
 
    $('.menu-item').on("click", function() { 
 
     $(this).next().slideToggle("fast"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="showmenu1" class="menu-item">Click Here</div> 
 
<div class="menu1" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu2" class="menu-item">Click Here</div> 
 
<div class="menu2" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu3" class="menu-item">Click Here</div> 
 
<div class="menu3" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div>

или если меню не рядом с ним, использовать атрибут данных

$(document).ready(function() { 
 
    $('[data-toggles]').on("click", function() { 
 
     var sel = $(this).data("toggles"); 
 
     $(sel).slideToggle("fast"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="showmenu1" data-toggles=".menu1">Click Here</div> 
 
<div class="menu1" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu2" data-toggles=".menu2">Click Here</div> 
 
<div class="menu2" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu3" data-toggles=".menu3">Click Here</div> 
 
<div class="menu3" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div>

источник

2016-03-17 12:59:17 epascarello

Вместо идентификаторов изменений в class атрибута и использовать $(this) контекст и обратитесь к следующему DIV, чтобы показать:

$(document).ready(function() { 
 
    $('.showmenu').click(function() { 
 
    $(this).next('.menu').slideToggle("fast"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="showmenu">Click Here</div> 
 
<div class="menu" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div class="showmenu">Click Here</div> 
 
<div class="menu" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div class="showmenu">Click Here</div> 
 
<div class="menu" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div>

источник

2016-03-17 12:58:08 Jai

Вот как вы можете уменьшить ваш код JQuery без изменения HTML:

$(document).ready(function() { 
 
    $('[id^=showmenu]').click(function() { 
 
     $(this).next('[class^=menu]').slideToggle("fast"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="showmenu1">Click Here</div> 
 
<div class="menu1" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu2">Click Here</div> 
 
<div class="menu2" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div> 
 
<div id="showmenu3">Click Here</div> 
 
<div class="menu3" style="display: none;"> 
 
    <ul> 
 
    <li>Button1</li> 
 
    <li>Button2</li> 
 
    <li>Button3</li> 
 
    </ul> 
 
</div>

источник

2016-03-17 13:08:24

переключатель с JQuery 1.8.3

ответ

Смежные вопросы