Question

大家好我是jquery的新手，我有两个疑问可以从我的编码中询问..

这是我的XHTML编码以及我的JQUERY和CSS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Test</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <meta name="viewport" content="width=device-width"/>
        <style>           
            #filterpanel{
                position: absolute;
                top: 50%;
                left: 0;
                width: 99%;
                height: 20%;
                background-color: azure;
                border: 4px solid black;
                border-radius: 12px;
                overflow-x: scroll;    
           }
        </style>
    </h:head>
    <h:body>
        <div id="filterpanel"></div>
        <script>
            $(document).ready(function(){

                for (var i = 0; i &lt; 6; i++) {     

                    var s=$('<div id="filterinfo'+i+'" ><div id="imgclose'+i+'" style="position: absolute; right:0;top: 0;cursor: pointer;" ><img src="images/close.png" width="20px" height="20px"/></div></div>').css({"text-align":"center","background-color":"black","color":"white","position":"relative","width":"16%","height":"98%", "border-radius":"16px","top":"1%","float":"left","left":"0.5%","margin-left":"1%"});
                   s.appendTo("#filterpanel");  
                   $("imgclose"+i).click(function(){
                       alert("clicked");
                       $("filterinfo"+i).hide();
                   });
               }

           });
        </script>
    </h:body>
</html>

事情是我所有的div都是按照我的要求成功生成特定id的，但是如果i的值超过5，则生成的div（即）filterinfo6会显示在filterinfo1下面而不是filterinfo5的右侧我的主div滤镜面板，虽然我已经给出了溢出-x作为主div的滚动。

我的第二个疑问是，当我点击imgclose div时，点击功能不起作用...我真的需要关闭特定的div（即）如果用户点击imgclose4那么应该删除特定的div filterinfo4从我的主要div filterpanel ....到目前为止我所尝试的是不工作....任何人都可以帮助我。

以下是演示：http://jsfiddle.net/3XwpG/

提前致谢。

Answer 1

首先是将filterinfo的css更改为：

{
    "text-align": "center",
    "background-color": "black",
    "color": "white",
    "display": "inline-block",
    "width": "16%",
    "height": "98%",
    "border-radius": "16px",
    "margin-left": "1%"
}

第二件事是你必须定义#filterpanel的高度并制作white-space: nowrap。

#filterpanel{
    position: absolute;
    top: 50%;
    left: 0;
    width: 99%;
    height: 100px;
    position: relative;
    background-color: azure;
    border: 4px solid black;
    border-radius: 12px;
    overflow-x: scroll;
    white-space: nowrap;
}

DEMO

Answer 2

正如我们在聊天中讨论的那样，您应该将white-space: nowrap;添加到父div。您可能也在寻找overflow-y: hidden;

的结果

最后，您应该避免使用内联CSS。请参阅下面的小提琴，了解“干净”的版本。

小提琴：http://jsfiddle.net/3XwpG/9/

overflow-x在Jquery中动态生成的DIV中不起作用？

2 个答案: