При щелчке на меню запоминать путь

317

04 августа 2017, 02:53

Есть меню. Не могу понять, как сделать так, чтобы при клике по нему сохранялся его путь. Например, как в Яндекс.Диске, когда пользователь выбирает «скопировать» или «вставить». Вот мой пример кода:

img {  
  border: none;  
} 
p { 
  font-size: 1em; 
  margin: 0 0 1em 0; 
} 
   
/* Стили для дерева каталогов */ 
ol.tree { 
  padding: 0 0 0 30px; 
  width: 300px; 
} 
li {  
  position: relative;  
  margin-left: -15px; 
  list-style: none; 
} 
li.file { 
  margin-left: -1px !important; 
} 
li.file a { 
  background: url(img/document.png) 0 2px no-repeat; 
  color: #fff; 
  padding-left: 21px; 
  text-decoration: none; 
  display: block; 
} 
li.file a:hover { 
  color: #aff; 
  text-decoration: underline; 
} 
li.toggle { 
  background: url(https://image.ibb.co/ichL75/folder_horizontal.png) 15px 1px no-repeat; 
  cursor: pointer; 
  padding-left: 37px; 
} 
li input { 
  position: absolute; 
  left: 0; 
  margin-left: 0; 
  opacity: 0; 
  z-index: 2; 
  cursor: pointer; 
  height: 1em; 
  width: 1em; 
  top: 0; 
} 
li input + ol { 
  background: url(https://image.ibb.co/kn6PZk/toggle_small_expand.png) 5px -3px no-repeat; 
  margin: -0.938em 0 0 -44px; /* 15px */ 
  height: 1em; 
} 
li input + ol > li {  
  display: none;  
  margin-left: -14px !important;  
  padding-left: 1px;  
} 
li input:checked + ol { 
  background: url(https://image.ibb.co/geQJuk/toggle_small_1.png) 5px 2px no-repeat; 
  margin: -1.25em 0 0 -44px; /* 20px */ 
  padding: 1.563em 0 0 80px; 
  height: auto; 
} 
li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */} 
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

<ol class="tree"> 
  <li class="toggle"> 
    fdgdfg 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    777 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        111 
        <input type="checkbox"> 
        <ol class="tree"> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    123 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        123 
        <input type="checkbox"> 
        <ol class="tree"> 
          <li class="toggle"> 
            2 
            <input type="checkbox"> 
            <ol class="tree"> 
            </ol> 
          </li> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    ж 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    clients 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        Загрузки 
        <input type="checkbox"> 
        <ol class="tree"> 
        </ol> 
      </li> 
      <li class="toggle"> 
        img 
        <input type="checkbox"> 
        <ol class="tree"> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    tree 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    555 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    img 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        home 
        <input type="checkbox"> 
        <ol class="tree"> 
          <li class="toggle"> 
            z1 
            <input type="checkbox"> 
            <ol class="tree"> 
              <li class="toggle"> 
                .purple 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .cache 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .thunderbird 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .git 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .gimp-2.8 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                Музыка 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .icons 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .swt 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .ssr 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .netbeans 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .wine 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .themes 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                .Skype 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                Документы 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                Изображения 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                Шаблоны 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
              <li class="toggle"> 
                Рабочий стол 
                <input type="checkbox"> 
                <ol class="tree"> 
                </ol> 
              </li> 
            </ol> 
          </li> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    js 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    css 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    ccc 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        vvvv 
        <input type="checkbox"> 
        <ol class="tree"> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    images 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
</ol>

Хочу сделать так, чтобы при клике на папку путь к этой папке сохранялся в отдельную переменную.

Answer 1

Если правильно понял вопрос, то можно сделать вот так (обернул названия папок в span, чтоб было на что обработчик вешать):

var path = ''; 
$('span').on('click', function() { 
  var arr = []; 
  $(this).parents('li').each(function() { 
    arr.push($(this).find('span').first().text()); 
  }); 
  path = arr.reverse().join('/'); 
  console.log(path); 
});

img { 
  border: none; 
} 
 
p { 
  font-size: 1em; 
  margin: 0 0 1em 0; 
} 
 
 
/* Стили для дерева каталогов */ 
 
ol.tree { 
  padding: 0 0 0 30px; 
  width: 300px; 
} 
 
li { 
  position: relative; 
  margin-left: -15px; 
  list-style: none; 
} 
 
li.file { 
  margin-left: -1px !important; 
} 
 
li.file a { 
  background: url(img/document.png) 0 2px no-repeat; 
  color: #fff; 
  padding-left: 21px; 
  text-decoration: none; 
  display: block; 
} 
 
li.file a:hover { 
  color: #aff; 
  text-decoration: underline; 
} 
 
li.toggle { 
  background: url(https://image.ibb.co/ichL75/folder_horizontal.png) 15px 1px no-repeat; 
  cursor: pointer; 
  padding-left: 37px; 
} 
 
li input { 
  position: absolute; 
  left: 0; 
  margin-left: 0; 
  opacity: 0; 
  z-index: 2; 
  cursor: pointer; 
  height: 1em; 
  width: 1em; 
  top: 0; 
} 
 
li input+ol { 
  background: url(https://image.ibb.co/kn6PZk/toggle_small_expand.png) 5px -3px no-repeat; 
  margin: -0.938em 0 0 -44px; 
  /* 15px */ 
  height: 1em; 
} 
 
li input+ol>li { 
  display: none; 
  margin-left: -14px !important; 
  padding-left: 1px; 
} 
 
li input:checked+ol { 
  background: url(https://image.ibb.co/geQJuk/toggle_small_1.png) 5px 2px no-repeat; 
  margin: -1.25em 0 0 -44px; 
  /* 20px */ 
  padding: 1.563em 0 0 80px; 
  height: auto; 
} 
 
li input:checked+ol>li { 
  display: block; 
  margin: 0 0 0.125em; 
  /* 2px */ 
} 
 
li input:checked+ol>li:last-child { 
  margin: 0 0 0.063em; 
  /* 1px */ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ol class="tree"> 
  <li class="toggle"> 
    <span>fdgdfg</span> 
    <input type="checkbox"> 
    <ol class="tree"> 
    </ol> 
  </li> 
  <li class="toggle"> 
    <span>777</span> 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        <span>111</span> 
        <input type="checkbox"> 
        <ol class="tree"> 
        </ol> 
      </li> 
      <li class="toggle"> 
        <span>222</span> 
        <input type="checkbox"> 
        <ol class="tree"> 
          <li class="toggle"> 
            <span>2</span> 
            <input type="checkbox"> 
            <ol class="tree"> 
            </ol> 
          </li> 
        </ol> 
      </li> 
    </ol> 
  </li> 
  <li class="toggle"> 
    <span>123</span> 
    <input type="checkbox"> 
    <ol class="tree"> 
      <li class="toggle"> 
        <span>123</span> 
        <input type="checkbox"> 
        <ol class="tree"> 
          <li class="toggle"> 
            <span>2</span> 
            <input type="checkbox"> 
            <ol class="tree"> 
            </ol> 
          </li> 
        </ol> 
      </li> 
    </ol> 
  </li> 
</ol>