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


Я работаю над личным проектом, чтобы держать различные фрагменты/примеры/малых проектов, связанной с разминированием. Я хочу сделать большую часть моей ширине страницы, поэтому я решил написать меню навигации, выдвигается. Он работает, как ожидалось, но код довольно большой.

Я представила HTML и CSS на всякий случай, что помогает, Но я действительно только ищет помощь с JavaScript. Я не нуждаюсь в том, чтобы переписать все это.

$(document).ready(function() {
 $('#tab').click(function() {
  if($('#main').attr('class') != 'out') {
     $('#main').animate({
      'margin-left': '+=340px',
       }, 500, function() {
       $('#main').addClass('out');
       });
            
    } else {
      $('#main').animate({
       'margin-left': '-=340px',
        }, 500, function() {
       $('#main').removeClass('out');
        });
      
     }
    });
    
    //does the same as above, but when I press ctrl + 1. from /http://www.scottklarr.com/topic/126/how-to-create-ctrl-key-shortcuts-in-javascript/
    $(document).keyup(function (e) {
     if(e.which == 17) isCtrl=false;
      }).keydown(function (e) {
       if(e.which == 17) isCtrl=true;
       if(e.which == 97 && isCtrl == true) {
        if($('#main').attr('class') != 'out') {
           $('#main').animate({
            'margin-left': '+=340px',
             }, 500, function() {
             $('#main').addClass('out');
             });
                  
          } else {
            $('#main').animate({
             'margin-left': '-=340px',
              }, 500, function() {
             $('#main').removeClass('out');
              });
            
           }
            return false;
           }
    });
   });
#sidebar {  
 top: 0;
 left: 0;
 position: relative;
 float: left;
 }
 
#main {
 width: 320px;
 padding: 10px;
 float: left;
 margin-left: -340px;
 }

#tab {
 width: 30px;
 height: 120px;
 padding: 10px;
 float: left;
 }

.clear { clear: both; }
<div id="sidebar">
  <div id="main"></div>
  <div id="tab"></div>
  <br class="clear">
 </div>



1110
15
задан 22 января 2011 в 12:01 Источник Поделиться
Комментарии
1 ответ

Во-первых, кажется, что isCtrl не объявлены в любом месте кода. Поставил ВАР isCtrl = ложь; как в первой строке внутри функции ready. В противном случае, вы получите на JavaScript ошибка, когда первый ключ находится пользователь нажимает не на клавиши Ctrl ключ. Кроме того, == правда ненужно в если заявление, оно может быть опущено.

Во-вторых, эта линия может быть улучшена, так как он завершается неудачей, если элемент является членом другого класса:

if($('#main').attr('class') != 'out') {

Он может быть переписан с использованием .hasClass() как:

if(!$('#main').hasClass('out')) {

В самом деле, вы должны выполнить рефакторинг весь этот блок в отдельную функцию, чтобы не дублировать код:

function toggleMenu() {
if(!$('#main').hasClass('out')) {
// ...
} else {
// ...
}
}

И поставить toggleMenu(); где дублировать код в каждой функции. Также, если производительность является проблемой, вы должны кэшировать объект jQuery $('#главный') , объявив еще одну переменную в начале готовая функция. Не делать так медленно, потому что jQuery придется снова найти совпадающие элементы в документе.

Более незначительные критика в том, что из заявления управления braceless, таких как:

if(e.which == 17) isCtrl=false;

Некоторые говорят, что лучше всегда ставить код с отступом в скобки, чтобы избежать ошибок, вызванных неправильно расставленные точки с запятой.

Наконец, вмятины не будет смотреть на весь код. Исправь это, и ваш код станет более читабельной.

Чтобы добавить: а еще похоже, что у вас есть лишняя запятая в конце:

'margin-left': '+=210px',

Это синтаксически правильные, но это вызывает проблемы с Internet Explorer 7 и ниже.

12
ответ дан 22 января 2011 в 02:01 Источник Поделиться