将两个网址合二为一

Question

嗨，所有的css大师：D

我有这种情况（在手机上）：

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

我希望，当通过@media在landascape模式下，将其更改为此（不显示：无等）：

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

是否有任何方法可以隐藏标签的一部分？比如</ul>但<ul>？ 我更喜欢css解决方案，但JS或JQ当然也可以;）

感谢

Answer 1

如果安装了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();

Answer 2

您可以使用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，但通常边缘是唯一不同的风格。

Answer 3

这是一个虚拟的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为none

而且，还有其他情况 showmode2为none，显示showmode1

我知道这是额外的div，但它确实具有仅仅是css的优势。如果列表是小内容。也许轻微膨胀不会成为问题。

关于这一点的好处是你也可以选择稍微更改单词和/或更改li等的顺序。

Answer 4

vanilla方法（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;

Demo

Answer 5

您应该能够使用媒体查询来折叠任何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或其他标记，这是一个很好的答案，但它可能不适合你的情况。