Trasform два UL в одном - PullRequest
Новая
       12

Trasform два UL в одном

0 голосов
/ 02 апреля 2012

Привет всем гуру css: D

У меня такая ситуация (на мобильном телефоне): 

<ul>
 <li>one</li>
 <li>two</li>
</ul>
<ul>
 <li>three</li>
 <li>four</li>
</ul>

и я хочу, чтобы в режиме ландшафта через @media, изменить его на это (без отображения: нет и т. Д.): 

<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
 <li>four</li>
</ul>

Есть ли способ скрыть только часть тега? как </ul> но <ul>? Я предпочитаю решение css, но JS или JQ, конечно, тоже хорошо;)

спасибо

Ответы [ 5 ]

3 голосов
/ 02 апреля 2012

Если у вас установлен jQuery, вы можете сделать это следующим образом: 

var u = $('ul').first(); //select your first ul element, you can do it by id or class selector
u.append(u.next().html());
u.next().remove();
1 голос
/ 02 апреля 2012

Вы можете легко сделать это с помощью JQUERY, см .: http://jsfiddle.net/w9dFS/

** Добавлена ​​функция ориентации jQuery Mobile, позволяющая проверить ее альбомную ориентацию. 

if(jQuery.event.special.orientationchange.orientation() = "landscape") {
    //Search all UL's with a higher index than 0
    $('ul:gt(0)').each( function() {
        //Get the content of the UL's
        var content = $(this).html();
        //Hide the UL
        $(this).hide();
        //Insert the content into the first UL
        $('ul:eq(0)').append(content);
    });
}

В противном случае вы можете добавить класс CSS к другим UL и использовать простой CSS для «сброса» стиля.

Простое исправление CSS может быть: 

/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
    ul {margin-top:0px;}
    ul:first-child {margin-top:50px;}
}

Я не знаю, какой CSS вам нужно удалить на других, но обычно маржа - это единственное, что отличает стиль.

0 голосов
/ 02 апреля 2012

Вы должны иметь возможность свернуть любые стили CSS, используя медиа-запросы для альбомной ориентации, поэтому вам не нужно связываться с JavaScript, чтобы решить эту проблему. 

ul { margin:0 0 1em; padding:1em; }
li { margin:0 1em .5em; padding:0; }
/* Landscape */
@media screen and (min-width: 321px) {
  ul + ul { padding-top:0; margin-top:-2em; }
}

Вы можете просмотреть демонстрацию либо на своем мобильном телефоне.или измените размер окна браузера, чтобы оно стало уже, как обычно, шириной 350px.

Демонстрация: turi.co / up / merge_ul.html

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

0 голосов
/ 02 апреля 2012

Ванильный подход (jQuery - не ответ на все вопросы, несмотря на this ):

Применение селекторов 

<ul id="first-list">
    <li>one</li>
    <li>two</li>
</ul>
<ul id="second-list">
    <li>three</li>
    <li>four</li>
</ul>

Добавление внутреннего HTML 

var firstList = document.getElementById('first-list');
var secondList = document.getElementById('second-list');
secondList.innerHTML = firstList.innerHTML + secondList.innerHTML;

jsfiddle-icon Демо

0 голосов
/ 02 апреля 2012

Вот фиктивное решение только для CSS: 

<div class="showmode1">
<ul>
 <li>one</li>
 <li>two</li>
</ul>
<ul>
 <li>three</li>
 <li>four</li>
</ul>
</div>

<div class="showmode2">
<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
 <li>four</li>
</ul>
</div>

Затем настройте свои правила CSS так, чтобы в ландшафте showmode2 отображается, а showmode1 не имеет значения

И, это другая ситуация showmode2 отсутствует, а showmode1 отображается

Я знаю, что это дополнительный div, но у него есть преимущество только в том, что он css. Если списки небольшого содержания. Может быть, небольшое вздутие не будет проблемой.

Приятно то, что у вас есть возможность немного изменить слова и / или изменить последовательность символов и т. Д.

...