Question

我有问题，我是jquery的新手

我有一张桌子，我想在桌子旁边添加一个div标签

这是我尝试的代码：

表：

<body>
<table id='menu_samping'>
    <tr>
        <td>Fashion</td>
    </tr>
    <tr>
        <td>Electronik</td>
    </tr>
    <tr>
        <td>Food</td>
    </tr>
    <tr>
        <td>Accessories</td>
    </tr>
    <tr>
        <td class="last">Health</td>
    </tr>
</table>
</body>

这是我的jquery和css代码：

    #menu_samping{
        width: 120px;
        border-spacing: 0px;

    }
    #menu_samping tr{
        height: 40px;
    }
    #menu_samping td{
        padding-left: 5px;
        background-color: #4b4b4b;
        border-bottom: groove #202020 2px;
        color : white;
    }
    #menu_samping td:hover{
        color : #d98d00;
        cursor: pointer;
    }
    #menu_samping td.last{
        border-bottom-left-radius: 4px
    }
    #testElem{
        border: 1px black solid;
        background: white;
        height: 500px;
        width: 200px;
        position: absolute;
    }
    #segitiga{
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 4px 5px 4px 0;
        border-color: transparent #6422ee transparent transparent;          }

$(function() {
    $( "#menu_samping td" ).mouseover(function() {
        generate_menu(this)
    });
});
function generate_menu(menu){
    $("#testElem, #segitiga").remove();
    $('#menu_samping').after($('<div id="segitiga"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>'));
}

这是我的结果

enter image description here

我想要的结果如下：

enter image description here

，鼠标离开表格和附加div元素后，该元素将被删除。

有人能帮帮我吗？我真的需要这个...... 感谢

Answer 1

jsFiddle

CSS

.inline{
    float:left;
}  

#segitiga {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 12px 10px 0;
    border-color: transparent #fff transparent transparent;
    margin-left:-12px;
}

为所有元素添加了一个类，甚至更改了segitiga元素的css ...

仅供参考，不是问题的一部分

我猜 this 就是你想要做的。

更新 1 Check this 不是完美的解决方案，建议将不胜感激。

希望这就是你要找的...... !!

Answer 2

http://jsfiddle.net/DC39g/1/ 基本上float:left; 这是一个简单的解决方案。我已经标记了我已更改的位置（仅在css中）。这可能会破坏它周围的一些对齐，在这种情况下是ass。

你也可以使用绝对定位。在这种情况下使用绝对的简单例子是：

<div style="position:relative">
    <table style='position:absolute'></table>
    <div style='position:absolute'></div>
</div>

但在这种情况下，您必须完全根据测量结果映射所有元素。

对于第三个div（箭头），我建议您使用选定框的CSS样式代替。

无论如何，我为你编写了箭头，这是对上述jsfiddle的更新 http://jsfiddle.net/DC39g/2/ 变化：

var margin=$(menu).position().top+$(menu).height()/2;
$('#menu_samping').after($('<div id="segitiga" style="margin-top:'+margin+'px"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>'));

希望有所帮助

Answer 3

(function() {
 $("#menu_samping td").mouseover(function() {
        generate_menu($(this));
    });
    $("#menu_samping td").mouseout(function(){
        remove_div();
    });
});
function generate_menu(menu){
        $('#display_area').html('<div id="segitiga"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>');
    }
    function remove_div(){
        $('#display_area').html('');
    }


<table id='menu_samping' style="float:left">
    <tr>
        <td>Fashion</td>
    </tr>
    <tr>
        <td>Electronik</td>
    </tr>
    <tr>
        <td>Food</td>
    </tr>
    <tr>
        <td>Accessories</td>
    </tr>
    <tr>
        <td class="last">Health</td>
    </tr>
</table>
<div id="display_area" style="float:left">

</div>

表和div的样式必须浮动才能彼此相邻显示。表格的显示选项是默认的块，因此您添加的下一个元素显示在表格元素下。为避免此行为，可以使用float left选项。

使用jquery在table旁边添加div元素

3 个答案: