Question

我正在制作一个“无显示”，我想在一个引导图标上的陈词滥调后显示它。

以下是代码：

模板：

<a href="#" class="toggler" data-prod-cat="{{order.cartId.id}}"><span class="glyphicon glyphicon-th-list" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{% trans 'show detail' %}"></span></a>
            </td>
        </tr>
        <tr class="cat{{order.cartId.id}}" style="display:none"><td></td><td colspan="5">

                        {% for detailOrder in detailOrders %}
                            {% if detailOrder.cartId.id == order.cartId.id %}
                                <li>{{detailOrder.quantity}} {{detailOrder.unit}} de {{detailOrder.productId.name}} pour {{entreprise.currency.symbol}} {{detailOrder.totalPrice}}
                            {% endif %}
                        {% endfor %}
                        <br><u>Livraison</u> : {{order.deliveryInstruction.instructions|truncatechars:60}}

        </td></tr>
        {% endfor %}

Javascript：

<script type="text/javascript">
$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});

我的控制台上没有错误，所以我对找到一个消息有点迷失。

感谢您的帮助，祝您度过愉快的一天：）

Answer 1

试试这个：

$(document).ready(function(){
 
  $(".toggler").click(function(){
     if($('.cat').css('display') === 'none'){
       $('.cat').css('display', 'block');
    }else{
       $('.cat').css('display', 'none');
    }  
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<input type="button" class="toggler" value="Toggle"/>

<table>
<tr class="cat" style="display:none;">
     <td>Conlumn 1</td>
      <td colspan="5">Conlumn 2</td>
</tr>
  
  </table>

我希望这有帮助！

JQuery - 在表格模板中切换

1 个答案: